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

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

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

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

export default MasterDrawer;