import React from 'react';
import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import MasterActionsMenu from '../MasterActionsMenu';
import { getTimeSlot } from '../../lib';
import EditableWrapper from '../Editable/Editable';
import { armService } from '../../api/arm';

const MasterItem = ({ name, phone, id, schedule }) => {
  const { updateMaster } = armService();
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master',
  });

  return (
    <Tr>
      <Td>
        <EditableWrapper
          id={id}
          as={'name'}
          value={name}
          onSubmit={updateMaster}
        />
      </Td>
      <Td>
        {schedule?.length > 0 ? (
          <Stack direction='row'>
            {schedule?.map(({ startWashTime, endWashTime }, index: number) => (
              <Badge colorScheme={'green'} key={index}>
                {getTimeSlot(startWashTime, endWashTime)}
              </Badge>
            ))}
          </Stack>
        ) : (
          <Text color='gray.500'>{t('schedule.empty')}</Text>
        )}
      </Td>
      <Td>
        <EditableWrapper
          id={id}
          as={'phone'}
          value={phone}
          onSubmit={updateMaster}
        />
      </Td>
      <Td>
        <MasterActionsMenu id={id} />
      </Td>
    </Tr>
  );
};

export default MasterItem;