backend_and_cms/frontend/src/components/AboutUs/EditAboutUs.tsx

import {useState } from 'react';
import {
    Button,
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    NumberInput,
    NumberInputField,
    NumberInputStepper,
    NumberIncrementStepper,
    NumberDecrementStepper,
    Box,
    Image,
} from "@chakra-ui/react"

import { useMutation, useQueryClient } from "@tanstack/react-query"
import { type SubmitHandler, useForm } from "react-hook-form"
import { type ApiError,  AboutUsService, AboutUsUpdate, AboutUsPublic } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
import { handleError } from "../../utils"
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import { Editor } from "react-draft-wysiwyg";
import  draftToHtml  from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

interface EditAboutUsProps {
    isOpen: boolean
    onClose: () => void
    aboutUs: AboutUsPublic
}

// type FileUploadProps = {
//     register: UseFormRegisterReturn
//     accept?: string
//     multiple?: boolean
//     children?: ReactNode
// }

// const FileUpload = (props: FileUploadProps) => {
//     const { register, accept, multiple, children } = props
//     const inputRef = useRef<HTMLInputElement | null>(null)
//     const { ref, ...rest } = register as { ref: (instance: HTMLInputElement | null) => void }

//     const handleClick = () => inputRef.current?.click()

//     return (
//         <InputGroup onClick={handleClick}>
//             <input
//                 type={'file'}
//                 multiple={multiple || false}
//                 hidden
//                 accept={accept}
//                 {...rest}
//                 ref={(e) => {
//                     ref(e)
//                     inputRef.current = e
//                 }}
//             />
//             <>
//                 {children}
//             </>
//         </InputGroup>
//     )
// }



const EditAboutUs = ({ aboutUs, isOpen, onClose }: EditAboutUsProps) => {
    const url = import.meta.env.VITE_API_URL
    const queryClient = useQueryClient()
    const showToast = useCustomToast()
    const {
        register,
        handleSubmit,
        reset,
        formState: { errors, isSubmitting },
    } = useForm<AboutUsUpdate>({
        mode: "onBlur",
        criteriaMode: "all",
        defaultValues: {
            index: aboutUs.index,
            title: aboutUs.title,
            description: aboutUs.description,
            image: undefined,
        },
    })
    const [editorState, setEditorState] = useState<EditorState>(() => {
        const contentBlock = htmlToDraft(aboutUs.description);
        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            return EditorState.createWithContent(contentState);
        }
        return EditorState.createEmpty();
    });
    const [content, setContent] = useState<string>(aboutUs.description);

    // const validateFiles = (value: File) => {
    //     if (typeof value === 'string') return true;


    //     const fsMb = value.size / (1024 * 1024)
    //     const MAX_FILE_SIZE = 10
    //     if (fsMb > MAX_FILE_SIZE) {
    //         return 'Max file size 10mb'
    //     }

    //     return true
    // }


    // type FormValues = {
    //     file_: FileList
    // }


    const mutation = useMutation({
        mutationFn: (data: AboutUsUpdate) =>
            AboutUsService.updateAboutUs({ id: aboutUs.id, formData: data }),
        onSuccess: () => {
            showToast("Success!", "About Us update successfully.", "success")
            reset()
            setEditorState(EditorState.createEmpty());
            onClose()
        },
        onError: (err: ApiError) => {
            handleError(err, showToast)
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ["aboutUs"] })
        },
    })

    const onSubmit: SubmitHandler<AboutUsUpdate> = (data) => {
        if (data.image instanceof FileList && data.image.length > 0) {
            data.image = data.image[0]
        }else{
            data.image = null
        }
        mutation.mutate(data)
        console.log(data)

    }


    return (
        <>
            <Modal
                isOpen={isOpen}
                onClose={onClose}
                size={'xl'}
                isCentered
            >
                <ModalOverlay />
                <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
                    <ModalHeader>Edit About Us</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody pb={30}>
                        <Box boxSize='auto'>
                            <Image src={url + "/" + aboutUs.image}  />
                        </Box>
                        <FormControl isRequired isInvalid={!!errors.title}>
                            <FormLabel htmlFor="title">Title</FormLabel>
                            <Input
                                id="title"
                                {...register("title", {
                                    required: "Title is required.",
                                })}
                                placeholder="Title"
                                type="text"
                            />
                            {errors.title && (
                                <FormErrorMessage>{errors.title.message}</FormErrorMessage>
                            )}
                        </FormControl>
                        <FormControl isRequired isInvalid={!!errors.description}>
                            <Editor
                                editorState={editorState}
                                wrapperClassName="wrapper-class"
                                editorClassName="demo-editor"
                                onEditorStateChange={newState => {
                                    setEditorState(newState);
                                    const newContent = draftToHtml(convertToRaw(newState.getCurrentContent()));
                                    setContent(newContent);
                                    reset({
                                        description: newContent,
                                    });

                                }}
                                toolbar={{
                                    options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history', 'embedded', 'emoji', 'image'],
                                    inline: { inDropdown: true },
                                    list: { inDropdown: true },
                                    textAlign: { inDropdown: true },
                                    link: { inDropdown: true },
                                    history: { inDropdown: true },
                                }}
                            />
                        </FormControl>
                        <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>
                            {errors.index && (
                                <FormErrorMessage>{errors.index.message}</FormErrorMessage>
                            )}
                        </FormControl>

                        <FormControl isInvalid={!!errors.image} isRequired>
                            <FormLabel>{'Image Upload'}</FormLabel>

                            <input type="file" {...register("image")} />
                            <FormErrorMessage>
                                {errors.image && errors?.image.message}
                            </FormErrorMessage>
                        </FormControl>

                    </ModalBody>

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