import { View } from '../components/View';
import { Text } from '../components/Text';
import ApphouseLogoBW from '../assets/ApphouseLogoBW.png';
import React from 'react';
import { observer } from 'mobx-react';
import { ApphouseComponent } from '../components/component.interfaces';
import { CSSProperties, css } from 'glamor';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';

export interface ApphouseCopyrightStyles {
  container?: CSSProperties;
  text?: CSSProperties;
  img?: CSSProperties;
}

export interface ApphouseCopyrightProps
  extends ApphouseComponent<ApphouseCopyrightStyles> {
  children?: React.ReactNode;
  /**
   * The size of the image
   * @default 20
   */
  imageSize?: number;
  /**
   * The year to display in the copyright notice
   */
  year?: number;
}

export const ApphouseCopyright: React.FC<ApphouseCopyrightProps> = observer(
  (props) => {
    const { children, year, imageSize = 20 } = props;

    let content = children || null;

    const localStyles = useLocalStyles(
      {},
      props.styleOverwrites,
      props.gutters
    );

    if (typeof children === 'string' && !year) {
      content = (
        <Text variant="caption" bold color="onPrimary_90" {...localStyles.text}>
          {children}
        </Text>
      );
    } else if (year) {
      content = (
        <Text variant="caption" bold color="onPrimary_90" {...localStyles.text}>
          Copyright © {year} Apphouse, Inc. All rights reserved
        </Text>
      );
    }

    return (
      <View
        orientation="horizontal"
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
        styleOverwrites={localStyles.container}
      >
        <img
          src={ApphouseLogoBW}
          alt="Apphouse Logo"
          width={imageSize}
          {...css(localStyles.img)}
        />
        {content}
      </View>
    );
  }
);