import { Button } from 'components/button';
import { Fab, FabColorVariant } from 'components/fab';
import { Col, Container, Row } from 'components/layout';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { BlackPage, CloseThick, DownloadFile } from 'icons';
import React from 'react';
import { GestureResponderEvent } from 'react-native';

export const File: React.FC<FileProps> = ({ message, status }) => {
  const { fileName, fileSize } = message;
  const colorVariant: FabColorVariant =
    status === 'downloaded' || status === 'downloading' ? 'primary' : 'body';
  const isDownloading = status === 'downloading';
  const isDownloaded = status === 'downloaded';
  const isPending = status === 'pending';

  const CenterElement = () => {
    return (
      <>
        <Visible if={isDownloaded}>
          <BlackPage colorVariant="white" />
        </Visible>
        <Visible if={isDownloading}>
          <CloseThick colorVariant="white" />
        </Visible>
        <Visible if={isPending}>
          <DownloadFile colorVariant="white" />
        </Visible>
      </>
    );
  };

  return (
    <Row mt="xs">
      <Container>
        <Fab
          variant="plain"
          sizeVariant="small"
          colorVariant={colorVariant}
          centerElement={<CenterElement />}
        />
      </Container>
      <Col ml="xs">
        <Row>
          <Text variant="body" color="title">
            {fileName}
          </Text>
        </Row>
        <Row alignItems="center" mt="3xs">
          <Text variant="caption" weightVariant="medium">
            {fileSize} /{' '}
          </Text>
          <Text variant="caption" weightVariant="medium">
            {fileSize}
          </Text>
          <Visible if={isDownloaded}>
            <>
              <Row ml="2xs">
                <Text variant="caption">-</Text>
              </Row>
              <Button
                onPress={() => {}}
                sizeVariant="content"
                titleColor="primary"
                title="Show on Finder"
              />
            </>
          </Visible>
          <Visible if={isPending}>
            <>
              <Row ml="2xs">
                <Text variant="caption">-</Text>
              </Row>
              <Button
                onPress={() => {}}
                sizeVariant="content"
                titleColor="primary"
                title="Download"
              />
            </>
          </Visible>
        </Row>
      </Col>
    </Row>
  );
};

export interface FileProps {
  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
  status?: 'pending' | 'downloading' | 'downloaded';
  message: {
    type?: string;
    createdAt: Date;
    body?: string;
    fileName?: string;
    fileSize?: string;
    unRead?: boolean;
    viewedCount?: number;
  };
}