import { Form, Formik, Field } from 'formik';
import { Box, FormControl, Text, Flex, Button, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';
import * as Yup from 'yup';

import { AlertDialog, EditableInput } from '../common';

const ProfileSchema = Yup.object().shape({
  firstName: Yup.string().required('Required'),
  lastName: Yup.string().required('Required'),
});

function ProfileForm({ me, formRef, onUpdate, ...props }) {
  const initialFormValues = me;

  return (
    <AlertDialog onConfirm={onUpdate}>
      {(onOpenConfirmation) => (
        <Box width="full" {...props}>
          <Formik
            initialValues={initialFormValues}
            innerRef={formRef}
            validationSchema={ProfileSchema}
            onSubmit={onOpenConfirmation}
          >
            {({ dirty, errors, touched }) => {
              return (
                <Form>
                  <Flex flexDir="column" gap="1rem">
                    <Flex flexDir="column" gap="1rem">
                      <FormControl isInvalid={!!errors.email && touched.email}>
                        <FormLabel htmlFor="email">Email</FormLabel>
                        <Field as={EditableInput} id="email" name="email" placeholder="Email" />
                      </FormControl>
                      <FormControl display="flex" isInvalid={!!errors.roles && touched.roles}>
                        <FormLabel htmlFor="roles">Roles:</FormLabel>
                        <Field
                          name="roles"
                          as={({ value }) => (
                            <Text opacity={0.5}>
                              {value?.map((role) => (
                                <Text key={role.id}>{role.slug}</Text>
                              ))}
                            </Text>
                          )}
                        />
                      </FormControl>
                      <Flex alignItems="flex-start" justifyContent="space-between" gap="1rem">
                        <FormControl isInvalid={!!errors.firstName && touched.firstName}>
                          <FormLabel htmlFor="firstName">First Name</FormLabel>
                          <Field
                            as={EditableInput}
                            isEditabled
                            id="firstName"
                            name="firstName"
                            placeholder="First Name"
                          />
                          <FormErrorMessage>{errors.firstName}</FormErrorMessage>
                        </FormControl>
                        <FormControl isInvalid={!!errors.lastName && touched.lastName}>
                          <FormLabel htmlFor="lastName">Last Name</FormLabel>
                          <Field as={EditableInput} isEditabled id="lastName" name="lastName" placeholder="Last Name" />
                          <FormErrorMessage>{errors.lastName}</FormErrorMessage>
                        </FormControl>
                      </Flex>
                    </Flex>
                    {dirty && (
                      <Button type="submit" colorScheme="primary" width="fit-content">
                        <Text>Update Profile</Text>
                      </Button>
                    )}
                  </Flex>
                </Form>
              );
            }}
          </Formik>
        </Box>
      )}
    </AlertDialog>
  );
}

ProfileForm.propTypes = {};

export default ProfileForm;
