"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";

import {
    FormProvider,
    SubmitErrorHandler,
    SubmitHandler,
    useForm,
} from "react-hook-form";
import { deleteDialog } from "../Swal/CustomAlerts";
import { Box, Button, Grid, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material";
import { Check, Close, EditNote } from "@mui/icons-material";
import { useGridApiRef } from "@mui/x-data-grid";
import {CreateItemInputs, saveItem} from "@/app/api/settings/item/actions";
import {saveItemQcChecks} from "@/app/api/settings/qcCheck/actions";
import {useTranslation} from "react-i18next/index";
import {ItemQc} from "@/app/api/settings/item";

type Props = {
    isEditMode: boolean;
    // type: TypeEnum;
    defaultValues: Partial<CreateItemInputs> | undefined;
    qcChecks: ItemQc[]
};

const CreateItem: React.FC<Props> = ({
                                         isEditMode,
                                         // type,
                                         defaultValues,
                                         qcChecks
                                     }) => {
    // console.log(type)
    const apiRef = useGridApiRef();
    const params = useSearchParams()
    console.log(params.get("id"))
    const [serverError, setServerError] = useState<String>("");
    const [tabIndex, setTabIndex] = useState(0);
    const { t } = useTranslation();
    const router = useRouter();
    const title = "Product / Material"
    const [mode, redirPath] = useMemo(() => {
        // var typeId = TypeEnum.CONSUMABLE_ID
        var title = "";
        var mode = "";
        var redirPath = "";
        // if (type === TypeEnum.MATERIAL) {
        //   typeId = TypeEnum.MATERIAL_ID
        //   title = "Material";
        //   redirPath = "/settings/material";
        // }
        // if (type === TypeEnum.PRODUCT) {
        // typeId = TypeEnum.PRODUCT_ID
        title = "Rough Schedule";
        redirPath = "/settings/rss";
        // }
        // if (type === TypeEnum.BYPRODUCT) {
        //   typeId = TypeEnum.BYPRODUCT_ID
        //   title = "By-Product";
        //   redirPath = "/settings/byProduct";
        // }
        if (isEditMode) {
            mode = "Edit";
        } else {
            mode = "Create";
        }
        return [mode, redirPath];
    }, [isEditMode]);
    // console.log(typeId)
    const formProps = useForm<CreateItemInputs>({
        defaultValues: defaultValues ? defaultValues : {
        },
    });
    const errors = formProps.formState.errors;

    const handleCancel = () => {
        router.replace(`/settings/product`);
    };
    const onSubmit = useCallback<SubmitHandler<CreateItemInputs & {}>>(
        async (data, event) => {
            let hasErrors = false;
            console.log(errors)
            // console.log(apiRef.current.getCellValue(2, "lowerLimit"))
            // apiRef.current.
            try {
                if (hasErrors) {
                    setServerError(t("An error has occurred. Please try again later.") as String);
                    return false;
                }
                console.log("data posted");
                console.log(data);
                const qcCheck =  data.qcChecks.length > 0 ? data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!)).map((qc) => {
                    return {
                        qcItemId: qc.id,
                        instruction: qc.instruction,
                        lowerLimit: qc.lowerLimit,
                        upperLimit: qc.upperLimit,
                        itemId: parseInt(params.get("id")!.toString())
                    }
                }) : []

                const test = data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!))
                // TODO:
                // 1. check field ( directly modify col def / check here )
                // 2. set error change tab index
                console.log(test)
                console.log(qcCheck)
                // return
                // do api
                console.log("asdad")
                var responseI = await saveItem(data);
                console.log("asdad")
                var responseQ = await saveItemQcChecks(qcCheck)
                if (responseI && responseQ) {
                    if (!Boolean(responseI.id)) {
                        formProps.setError(responseI.errorPosition!! as keyof CreateItemInputs, {
                            message: responseI.message!!,
                            type: "required",
                        });
                    } else if (!Boolean(responseQ.id)) {

                    } else if (Boolean(responseI.id) && Boolean(responseQ.id)) {
                        router.replace(redirPath);
                    }
                }
            } catch (e) {
                // backend error
                setServerError(t("An error has occurred. Please try again later."));
                console.log(e);
            }
        },
        [apiRef, router, t]
    );

    // multiple tabs
    const onSubmitError = useCallback<SubmitErrorHandler<CreateItemInputs>>(
        (errors) => {},
        []
    );

    return (
        <>
            <FormProvider {...formProps}>
                <Stack
                    spacing={2}
                    component="form"
                    onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
                >
                    <Grid>
                        <Typography mb={2} variant="h4">
                            {t(`${mode} ${title}`)}
                        </Typography>
                    </Grid>
                    <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
                        <Tab label={t("Product / Material Details")} iconPosition="end"/>
                        <Tab label={t("Qc items")} iconPosition="end" />
                    </Tabs>
                    {serverError && (
                        <Typography variant="body2" color="error" alignSelf="flex-end">
                            {serverError}
                        </Typography>
                    )}
                    {tabIndex === 0 && <ProductDetails />}
                    {tabIndex === 1 && <QcDetails apiRef={apiRef} />}
                    {/* {type === TypeEnum.MATERIAL && <MaterialDetails />} */}
                    {/* {type === TypeEnum.BYPRODUCT && <ByProductDetails />} */}
                    <Stack direction="row" justifyContent="flex-end" gap={1}>
                        <Button
                            name="submit"
                            variant="contained"
                            startIcon={<Check />}
                            type="submit"
                            //   disabled={submitDisabled}
                        >
                            {isEditMode ? t("Save") as String : t("Confirm") as String}
                        </Button>
                        <Button
                            variant="outlined"
                            startIcon={<Close />}
                            onClick={handleCancel}
                        >
                            {t("Cancel") as String}
                        </Button>
                    </Stack>
                </Stack>
            </FormProvider>
        </>
    );
};
export default CreateItem;