import React from 'react';
import {
  Box,
  Heading,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Button,
  useDisclosure,
  Flex,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

import MasterItem from '../MasterItem';
import MasterDrawer from '../MasterDrawer';
import data from '../../../stubs/json/arm-masters/success.json';

const TABLE_HEADERS = [
  'name' as const,
  'currentJob' as const,
  'phone' as const,
  'actions' as const,
];

const Masters = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master',
  });

  return (
    <Box p='8'>
      <Flex justifyContent='space-between' alignItems='center' mb='5'>
        <Heading size='lg'> {t('title')}</Heading>
        <Button colorScheme='green' onClick={onOpen}>
          + {t('add')}
        </Button>
      </Flex>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name) => (
              <Th key={name}>{t(`table.header.${name}`)}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {data.body.map((master, index) => (
            <MasterItem key={index} {...master} />
          ))}
        </Tbody>
      </Table>
      <MasterDrawer isOpen={isOpen} onClose={onClose} />
    </Box>
  );
};

export default Masters;