import {
  FormControl,
  FormLabel,
  Input,
  Button,
  Modal,
  ModalCloseButton,
  ModalContent,
  ModalOverlay,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from '@chakra-ui/react';
import { Formik, Form, Field } from 'formik';
import PropTypes from 'prop-types';

function ScrapingDataCreationModal({ isOpen, itemObject, onClose, onEdit, isUpdating }) {
  return (
    itemObject && (
      <Modal size="2xl" isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent margin="auto 0">
          <Formik initialValues={itemObject} onSubmit={onEdit}>
            <Form>
              <ModalHeader>Create County</ModalHeader>
              <ModalCloseButton />
              <ModalBody>
                {Object.keys(itemObject).map((key) => (
                  <FormControl key={key}>
                    <FormLabel>{key}</FormLabel>
                    <Field isDisabled={key === '_id'} as={Input} type="text" name={key} marginBottom="1rem" />
                  </FormControl>
                ))}
              </ModalBody>
              <ModalFooter>
                <Button isLoading={isUpdating} type="submit" colorScheme="primary">
                  Save
                </Button>
              </ModalFooter>
            </Form>
          </Formik>
        </ModalContent>
      </Modal>
    )
  );
}

ScrapingDataCreationModal.propTypes = {};

export default ScrapingDataCreationModal;
