import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Textarea,
  ModalFooter,
} from '@chakra-ui/react';
import InfiniteSelect from '../common/InfiniteSelect';
import { EVENT_NAMES } from '../../constants/define';
import { Formik, Form, Field } from 'formik';

const CreateCounty = ({ isCreating, isOpen, onClose, onCreate }) => {
  const handleCreateCounty = (values) => {
    const { title, description, user } = values;
    onCreate(title, description, user);
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent margin="auto 0">
        <Formik initialValues={{ title: '', description: '', user: '' }} onSubmit={handleCreateCounty}>
          <Form>
            <ModalHeader>Create County</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <FormControl>
                <FormLabel>Title</FormLabel>
                <Field as={Input} type="text" name="title" marginBottom="1rem" />
              </FormControl>
              <FormControl>
                <FormLabel>Description</FormLabel>
                <Field as={Textarea} name="description" marginBottom="1rem" height="15rem" />
              </FormControl>
              <FormControl>
                <FormLabel>Select User</FormLabel>
                <Field name="user">
                  {({ field }) => <InfiniteSelect eventName={EVENT_NAMES.USERS.LIST} {...field} />}
                </Field>
              </FormControl>
            </ModalBody>
            <ModalFooter>
              <Button isLoading={isCreating} type="submit" colorScheme="primary">
                Save
              </Button>
            </ModalFooter>
          </Form>
        </Formik>
      </ModalContent>
    </Modal>
  );
};

export default CreateCounty;
