import React from 'react';
import { Image } from 'react-native';
import { format } from 'date-fns';
import { CardContainer } from '../../CardContainer';
import { CardBasicItem } from '../../CardBasicItem';
import { Box } from '../../Box';
import { TouchableComponent } from '../../TouchableComponent';
import { ImageSquare, Trash } from 'phosphor-react-native';
import { colors } from '../../../theme/theme';

interface IAddedCard {
  title: string;
  date: string;
  image?: string;
  onPress?: () => void;
  disabled?: boolean;
}

export const AddedCard = ({
  disabled,
  image,
  date,
  title,
  onPress,
}: IAddedCard) => (
  <CardContainer flexDirection={'row'}>
    <Box width={'20%'} marginRight={'spacing-s'} alignItems={'center'}>
      {image ? (
        <Box position={'relative'} alignItems={'center'}>
          <Box
            position={'absolute'}
            zIndex={2}
            alignItems={'center'}
            justifyContent={'center'}
            width={'100%'}
            height={'100%'}
          >
            <ImageSquare size={24} weight="fill" color={colors.white} />
          </Box>
          <Image
            source={{ uri: image }}
            style={{ width: '100%', aspectRatio: 1, borderRadius: 4 }}
          />
        </Box>
      ) : (
        <ImageSquare size={24} weight="fill" color={colors.gray200} />
      )}
    </Box>
    <Box width={'75%'}>
      <CardBasicItem
        title={title}
        titleWeight="regular"
        titleVariant={'body'}
        titleColor={'yankeesBlue'}
        subtitleVariant={'label'}
        subtitle={format(new Date(date), 'dd/MM/yyyy')}
        subtitleColor={'darkBlueGray'}
        rightComponent={
          <TouchableComponent disabled={disabled} onPress={onPress}>
            <Trash size={24} weight="light" />
          </TouchableComponent>
        }
        footerText={`${format(new Date(date), 'K:m aaa')}`}
        footerTextVariant={'SubHead'}
        withCardContainer={false}
      />
    </Box>
  </CardContainer>
);