import {
  Box,
  FormControl,
  FormLabel,
  IconButton,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Text,
  useDisclosure,
} from '@chakra-ui/react';
import { ArrowDownIcon } from '@chakra-ui/icons';
import { Field, Form, useFormik } from 'formik';

export default function AddStepButtonWithModal() {
  const { isOpen, onClose, onOpen } = useDisclosure(),
    formik = useFormik({
      initialValues: {
        action: '',
      },
    });

  return (
    <>
      <Box fontSize="1.5rem" textAlign="center">
        <IconButton icon={<ArrowDownIcon />} margin="1rem" onClick={onOpen} />
      </Box>
      <Modal isCentered isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <Form>
            <ModalHeader>Add Step</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <FormControl>
                <FormLabel htmlFor="step">Step</FormLabel>
                <Field as={Text} id="step" name="step" placeholder="Step" />
              </FormControl>
            </ModalBody>
          </Form>
        </ModalContent>
      </Modal>
    </>
  );
}
