import React, { ReactNode } from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { colors } from '../../theme/theme';
import {
  Alarm,
  CircleWavyWarning,
  DotsThreeCircle,
} from 'phosphor-react-native';

export type OrderStatus =
  | 'new'
  | 'inProcess'
  | 'onTime'
  | 'late'
  | 'notArrived';

interface IOrderTag {
  status: OrderStatus;
  text: string;
}

const Icons: Record<string, ReactNode> = {
  new: (
    <CircleWavyWarning weight="fill" size={18} color={colors.bleuDeFrance} />
  ),
  inProcess: <Alarm weight="fill" size={18} color={colors.brightYellow} />,
  notArrived: (
    <DotsThreeCircle weight="fill" size={18} color={colors.darkBlueGray} />
  ),
};

const Icon = ({ status }: { status: OrderStatus }) =>
  Icons[status] ? <Box marginRight={'spacing-xs'}>{Icons[status]}</Box> : null;

export const OrderTag = ({ status, text }: IOrderTag) => {
  return (
    <Box
      borderRadius={4}
      backgroundColor={'ghostWhite'}
      flexDirection={'row'}
      alignItems={'center'}
      padding={'spacing-xs'}
      marginBottom={'spacing-xs'}
      alignSelf={'flex-start'}
    >
      <Icon status={status} />
      <Text
        variant={'mediumBody'}
        color={status === 'late' ? 'chiperBrandRed' : 'yankeesBlue'}
      >
        {text}
      </Text>
    </Box>
  );
};