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

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

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

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

export default Masters;