import React, { useState } from 'react';
import { Td, Tr, Link, Select } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';

import { getTimeSlot } from '../../lib';

const statuses = [
  'pending' as const,
  'progress' as const,
  'working' as const,
  'canceled' as const,
  'complete' as const,
];

type GetArrItemType<ArrType> =
  ArrType extends Array<infer ItemType> ? ItemType : never;

export type OrderProps = {
  carNumber?: string;
  startWashTime?: string;
  endWashTime?: string;
  orderDate?: string;
  status?: GetArrItemType<typeof statuses>;
  phone?: string;
  location?: string;
};

type Status = (typeof statuses)[number];

const statusColors: Record<Status, string> = {
  pending: 'yellow.100',
  progress: 'blue.100',
  working: 'orange.100',
  canceled: 'red.100',
  complete: 'green.100',
};

const OrderItem = ({
  carNumber,
  startWashTime,
  endWashTime,
  orderDate,
  status,
  phone,
  location,
}: OrderProps) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.order',
  });

  const [statusSelect, setStatus] = useState(status);
  const bgColor = statusColors[statusSelect];

  return (
    <Tr>
      <Td>{carNumber}</Td>
      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
      <Td>
        <Select
          value={statusSelect}
          onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
          placeholder={t(`status.placeholder`)}
          bg={bgColor}
        >
          {statuses.map((status) => (
            <option key={status} value={status}>
              {t(`status.${status}`)}
            </option>
          ))}
        </Select>
      </Td>
      <Td>
        <Link href='tel:'>{phone}</Link>
      </Td>
      <Td>{location}</Td>
    </Tr>
  );
};

export default OrderItem;