
import {
    Button,
    FormControl,
    FormLabel,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    NumberInput,
    NumberInputField,
    NumberInputStepper,
    NumberIncrementStepper,
    NumberDecrementStepper,
} from "@chakra-ui/react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { type SubmitHandler, useForm } from "react-hook-form"
import { type ApiError, ImageService, Info_imageService, ImageUpdate, ImagePublic } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
import { handleError } from "../../utils"
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

interface EditCourseImageProps {
    type: string
    imageDetails: ImagePublic
    isOpen: boolean
    onClose: () => void
}

const EditCourseImage = ({ type, imageDetails, isOpen, onClose }: EditCourseImageProps) => {
    const queryClient = useQueryClient()
    const showToast = useCustomToast()
    const {
        register,
        handleSubmit,
        reset,
        formState: { errors, isSubmitting },
    } = useForm<ImageUpdate>({
        mode: "onBlur",
        criteriaMode: "all",
        defaultValues: {
            index: imageDetails.index,
        },
    })




    const mutation = useMutation({
        mutationFn: (data: ImageUpdate) =>
            type === 'Image' ?
                ImageService.updateImage({ index: data.index, id: imageDetails.id }) :
                Info_imageService.updateImage({ index: data.index, id: imageDetails.id }),
        onSuccess: (data) => {
            console.log(data)
            queryClient.setQueryData(['course'], data)
            reset()
            onClose()
        },
        onError: (err: ApiError) => {
            handleError(err, showToast)
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ["courses", "course"] })
        },
    })

    const onSubmit: SubmitHandler<ImageUpdate> = (data) => {
        // data.index = Number(data.index)
        mutation.mutate(data)
        console.log(data)
    }


    return (
        <>
            <Modal
                isOpen={isOpen}
                onClose={onClose}
                size={'xl'}
                isCentered
            >
                <ModalOverlay />
                <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
                    <ModalHeader>{type === 'Image' ? "Edit Image" : "Edit Info Image"}</ModalHeader>
                    <ModalCloseButton />

                    <ModalBody pb={30}>

                        <FormControl isRequired isInvalid={!!errors.index}>
                            <FormLabel htmlFor="index">Index</FormLabel >
                            <NumberInput min={0} max={20}  >
                                <NumberInputField {...register("index", {
                                    required: "index is required.",
                                })} />
                                <NumberInputStepper>
                                    <NumberIncrementStepper />
                                    <NumberDecrementStepper />
                                </NumberInputStepper>
                            </NumberInput>


                        </FormControl>

                    </ModalBody>

                    <ModalFooter gap={3}>
                        <Button variant="primary" type="submit" isLoading={isSubmitting}>
                            Save
                        </Button>
                        <Button onClick={onClose}>Cancel</Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>
        </>
    )
}
export default EditCourseImage
