import React, { useState } from 'react';
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

const MasterDrawer = ({ isOpen, onClose }) => {
  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });

  const handleSave = () => {
    console.log(`Сохранение мастера: ${newMaster}`);
    onClose();
  };

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

  return (
    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>{t('title')}</DrawerHeader>
        <DrawerBody>
          <FormControl mb='4'>
            <FormLabel>{t('inputName.label')}</FormLabel>
            <Input
              value={newMaster.name}
              onChange={(e) =>
                setNewMaster({ ...newMaster, name: e.target.value })
              }
              placeholder={t('inputName.placeholder')}
            />
          </FormControl>
          <FormControl>
            <FormLabel> {t('inputPhone.label')}</FormLabel>
            <Input
              value={newMaster.phone}
              onChange={(e) =>
                setNewMaster({ ...newMaster, phone: e.target.value })
              }
              placeholder={t('inputPhone.placeholder')}
            />
          </FormControl>
        </DrawerBody>
        <DrawerFooter>
          <Button colorScheme='teal' mr={3} onClick={handleSave}>
            {t('button.save')}
          </Button>
          <Button variant='ghost' onClick={onClose}>
            {t('button.cancel')}
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};

export default MasterDrawer;