import { Box, Button, Input, Stack } from '@chakra-ui/react'
import React from 'react'
import { Controller, useForm } from 'react-hook-form'
import {
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from '@chakra-ui/react'

type Inputs = {
  name: string
  lastName: string

  age: string
}

export const ProfileEditModal = ({ onClose }) => {
  const {
    register,
    control,
    handleSubmit,
    watch,
    reset,
    setValue,
    formState: { errors },
  } = useForm<Inputs>({
    mode: 'onChange',
    defaultValues: {
      name: 'name',
      lastName: 'string',
      age: '12',
    },
  })

  const onSibmit = ({ name, age }) => {
    // console.log(1111111, name, age)
  }

  return (
    <Modal isOpen onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Modal Title</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Box
            as="form"
            flexDirection="column"
            display="flex"
            gap={3}
            onSubmit={handleSubmit(onSibmit)}
          >
            <label>
              Name:
              <Controller
                control={control}
                name="name"
                rules={{
                  required: 'required 4 now',
                  minLength: { value: 4, message: 'min 4 now' },
                }}
                render={({ field }) => (
                  <Input isInvalid={Boolean(errors.name)} {...field} />
                )}
              />
            </label>

            <label>
              Age:
              <Controller
                control={control}
                name="age"
                rules={{
                  required: 'required 4 now',
                }}
                render={({ field }) => (
                  <Input
                    isInvalid={Boolean(errors.age)}
                    type="number"
                    {...field}
                  />
                )}
              />
            </label>
            <label>
              lastName:
              <Controller
                control={control}
                name="lastName"
                render={({ field }) => (
                  <Input type="number" {...field} />
                )}
              />
            </label>
            <Stack gap={4} pt={8}>
              <Button variant="solid" type="submit">
                Submit
              </Button>
            </Stack>
          </Box>
          <ModalFooter>
            <Button variant="outline" type="button" onClick={onClose}>
              Отмена
            </Button>
          </ModalFooter>
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}