import React from 'react';
import { Formik, Form, Field } from 'formik';
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Select,
  Link,
  Textarea,
  ModalFooter,
  Box,
} from '@chakra-ui/react';
import InfiniteSelect from '../../components/common/InfiniteSelect';
import { EVENT_NAMES } from '../../constants/define';
import { useParams } from 'react-router-dom';
import { useMutation, useQueryClient } from 'react-query';

import { getPathWithParams } from '../../utilities/functions';
import { ROUTES } from '../../constants/paths';
import { ArrowLeftIcon } from '@chakra-ui/icons';

const UpdateAndViewCounty = () => {
  const { countyId } = useParams();
  const queryClient = useQueryClient();
  const county = queryClient.getQueryData([EVENT_NAMES.COUNTIES.VIEW, countyId]);
  const updateCountyMutation = useMutation(
    (newCounty) => {
      console.log(newCounty);
      return window.grpcAPIs[EVENT_NAMES.COUNTIES.UPDATE](newCounty);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries([EVENT_NAMES.COUNTIES.LIST]);
        // Nếu cập nhật thành công, ta có thể chuyển hướng đến trang xem thông tin "County" hoặc thực hiện hành động cần thiết khác
      },
    },
  );
  const handleUpdateCounty = (values) => {
    const { title, description, user } = values;
    console.log('values:', values);
    const updatedCounty = {
      id: countyId,
      title,
      description,
      managerId: user,
    };
    console.log(updatedCounty);
    updateCountyMutation.mutate({ id: countyId, title, description, managerId: user });
  };

  return (
    <>
      <Link href={getPathWithParams(ROUTES.DASHBOARD.COUNTIES.ROOT.path)}>
        <Button>
          <ArrowLeftIcon marginRight="1rem" />
          BACK
        </Button>
      </Link>
      <Formik
        initialValues={{
          title: county?.title || '',
          description: county?.description || '',
          user: county?.manager.id || '',
        }}
        onSubmit={handleUpdateCounty}
      >
        <Form>
          <FormControl width="50%" margin="0 auto">
            <FormLabel>Title</FormLabel>
            <Field as={Input} type="text" name="title" marginBottom="1rem" />
          </FormControl>
          <FormControl width="50%" margin="0 auto">
            <FormLabel>Description</FormLabel>
            <Field as={Textarea} name="description" marginBottom="1rem" height="15rem" />
          </FormControl>
          <FormControl width="50%" margin="0 auto">
            <FormLabel>Select User</FormLabel>
            <Field name="user">
              {({ field }) => (
                <InfiniteSelect defaultData={county?.manager} eventName={EVENT_NAMES.USERS.LIST} {...field} />
              )}
            </Field>
          </FormControl>
          <Box   width="50%"  margin="2REM auto">

          <Button isLoading={updateCountyMutation.isLoading} type="submit" colorScheme="primary">
            Save
          </Button>
          </Box>
        </Form>
      </Formik>
    </>
  );
};

export default UpdateAndViewCounty;
