import {useMutation} from "@apollo/client";
import {
    Drawer,
    DrawerBody,
    DrawerCloseButton,
    DrawerContent,
    DrawerHeader,
    DrawerOverlay,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalOverlay,
    Stack,
    useToast
} from "@chakra-ui/react";
import React, {useState} from "react";
import AddEditForm from "./AddEditForm";
import {getSinglePrimaryKey} from "./CustomeTableUtils";
import {addTableRecord, updateTableByPrimaryKey} from "../utils/GenericQueries";
import {AddEditDisplayType} from "../intefaces/interfaces";
import {underScoreToCapitalize} from "../utils/TransformText";

function CustomEditModal(props: any) {
    const toast = useToast()

    const {
        title, open, tablename, col, isUpdate,
        isModal, panels, addEditDisplayType = 1, recordsDisplayType = 1
    } = props
    const [formdata, setFormData] = useState(props.formdata);

    const [isSaving, setIsSaving] = useState(false);
    const updatebyPk = updateTableByPrimaryKey(tablename, col)

    const [updateByPrimaryKey] = useMutation(updatebyPk);

    const [addRecord] = useMutation(addTableRecord(tablename, col));


    const isFieldRequired = (field: string) => {
        const item = col?.find((item: any) => item.name === field);
        return item?.isRequired;
    }

    function save() {
        if (isSaving) {
            return;
        }
        let requiredFields: string[] = []
        Object.entries(formdata)?.forEach(([property, value]) => {
            if (isFieldRequired(property) && !value) {
                requiredFields.push(underScoreToCapitalize(underScoreToCapitalize(property)))
            }
        });
        const requiredFieldsLength = requiredFields.length
        if (requiredFieldsLength > 0) {
            toast({
                title: "Validation Error",
                description: `${requiredFields.join(", ")} ${requiredFieldsLength === 1 ? 'field is' : 'fields are'} required`,
                status: "error",
                duration: 9000,
                isClosable: true
            });
            return;
        }

        setIsSaving(true)
        if (isUpdate) {
            console.log("isUpdate ", formdata);

            updateByPrimaryKey({
                variables: formdata
            }).then(res => {
                setIsSaving(false)
                props.refetch();

            }).catch(e => {
                toast({
                    title: "Error",
                    description: e.message,
                    status: "error",
                    duration: 9000,
                    isClosable: true
                })
                setIsSaving(false)
                console.log("error ", e)
                console.log("query ", updatebyPk)
            })
        } else {
            //remove primary key
            let singlePrimaryKeyCol = getSinglePrimaryKey(col);
            delete formdata[singlePrimaryKeyCol];
            //ADD RECORD
            addRecord({
                variables: {
                    object: formdata
                }
            }).then(r => {
                setIsSaving(false)
                props.refetch();
            }).catch(e => {
                setIsSaving(false)
                console.log("error ", e)
                toast({
                    title: "Error",
                    description: e.message,
                    status: "error",
                    duration: 9000,
                    isClosable: true
                })
            })

        }
    }

    return (
        <Stack bg={props.secondaryColor} padding={4}>
            {addEditDisplayType == AddEditDisplayType.Modal &&
            <Modal
                isOpen={open} onClose={props.close}>
                <ModalOverlay/>
                <ModalContent maxW="80vw">
                    <ModalCloseButton/>
                    <ModalBody>
                        <AddEditForm
                            primaryColor={props.primaryColor}
                            secondaryColor={props.secondaryColor}
                            col={col}
                            close={props.close}
                            formdata={formdata}
                            setFormData={setFormData}
                            onSave={save}
                            isSaving={isSaving}
                            panels={panels}
                            refetch={() => {
                                props.refetch()
                            }}
                        />

                    </ModalBody>
                </ModalContent>
            </Modal>
            }
            {addEditDisplayType == AddEditDisplayType.Drawer &&
            <Drawer
                size="xl"
                isOpen={true}
                placement='right'
                onClose={() => {
                    console.log("close")
                }}
            >
                <DrawerOverlay/>
                <DrawerContent>
                    <DrawerCloseButton
                        onClick={() => {
                            props.close()
                        }}
                    />
                    <DrawerHeader>{title}</DrawerHeader>

                    <DrawerBody>
                        <AddEditForm
                            primaryColor={props.primaryColor}
                            secondaryColor={props.secondaryColor}
                            col={col}
                            close={props.close}
                            formdata={formdata}
                            setFormData={setFormData}
                            onSave={save}
                            isSaving={isSaving}
                            panels={panels}
                            refetch={() => {
                                props.refetch()
                            }}
                        />
                    </DrawerBody>
                </DrawerContent>
            </Drawer>

            }
            {addEditDisplayType == AddEditDisplayType.Simple &&
            <AddEditForm
                primaryColor={props.primaryColor}
                secondaryColor={props.secondaryColor}
                col={col}
                close={props.close}
                formdata={formdata}
                setFormData={setFormData}
                onSave={save}
                isSaving={isSaving}
                panels={panels}
                refetch={() => {
                    props.refetch()
                }}
            />
            }
        </Stack>
    )
}

export default CustomEditModal