import React, {
    useEffect,
    useState,
    type Dispatch,
    type SetStateAction,
} from 'react';
import { useApolloClient } from '@apollo/client';
import { Sidecar, useToast } from '@theorchard/suite-components';
import { trim } from 'lodash-es';
import { ReferenceSapProfitCenterFormFields } from 'src/components/reference-sap-profit-center-create/reference-sap-profit-center-form-fields';
import { useCreateSapProfitCenter } from 'src/apollo/mutations/reference-sap-profit-center';
import type { ReferenceSapProfitCenterCreateForm } from 'src/types/reference-sap-profit-center';

export interface ReferenceSapProfitCenterFormPropTypes {
    isSidecarOpen: boolean;
    setIsSidecarOpen: Dispatch<SetStateAction<boolean>>;
    setPage: Dispatch<SetStateAction<number>>;
}

const INITIAL_FORM_STATE: ReferenceSapProfitCenterCreateForm = {
    businessGroup: '',
    companyCode: '',
    displayName: '',
    profitCenter: '',
};

export const ReferenceSapProfitCenterForm: React.FC<
    ReferenceSapProfitCenterFormPropTypes
> = ({ isSidecarOpen, setIsSidecarOpen, setPage }) => {
    const [error, setError] = useState<string | null>(null);
    const [formData, setFormData] =
        useState<ReferenceSapProfitCenterCreateForm>(INITIAL_FORM_STATE);
    const [isSavingFormData, setIsSavingFormData] = useState<boolean>(false);
    const client = useApolloClient();

    const addToast = useToast();
    const addSapProfitCenter = useCreateSapProfitCenter();

    useEffect(() => {
        if (isSidecarOpen) {
            setFormData(INITIAL_FORM_STATE);
            setError(null);
        }
    }, [isSidecarOpen]);

    const changeHandler = (
        fieldName: string,
        value: string | undefined | null | string[]
    ) => {
        setError(null);
        setFormData(prev => ({ ...prev, [fieldName]: value }));
    };

    const submitHandler = () => {
        setIsSavingFormData(true);

        addSapProfitCenter({ variables: formData })
            .then(() => {
                setIsSidecarOpen(false);
                setIsSavingFormData(false);
                addToast(
                    `Profit center ${formData.displayName} created successfully.`
                );
                setPage(0);
                client.cache.evict({
                    id: 'ROOT_QUERY',
                    fieldName: 'abacusReferenceSapProfitCenterList',
                });
            })
            .catch(e => {
                setIsSavingFormData(false);
                const errorMsg = Array.isArray(e)
                    ? JSON.stringify(e[0])
                    : String(e);
                setError(
                    `Error: ${errorMsg}. Failed to create reference SAP profit center. ` +
                        'Either the entry for this profit center already exists or something went wrong. ' +
                        'Please try with a different profit center. And if you are still seeing this message, please contact support.'
                );
            });
    };

    const isFormInvalid = !(
        trim(formData.businessGroup) &&
        trim(formData.companyCode) &&
        trim(formData.displayName) &&
        trim(formData.profitCenter)
    );

    const handleClose = () => {
        if (!isSavingFormData) {
            setIsSidecarOpen(false);
            setError(null);
        }
    };

    return (
        <Sidecar
            confirmButtonProps={{
                disabled: isFormInvalid || isSavingFormData,
                title: isSavingFormData ? 'Creating...' : 'Create',
            }}
            isOpen={isSidecarOpen}
            onConfirm={submitHandler}
            onRequestClose={handleClose}
            title="New SAP Profit Center"
            testId="ProfitCenterFormSidecar"
        >
            <ReferenceSapProfitCenterFormFields
                changeHandler={changeHandler}
                error={error}
                formData={formData}
            />
        </Sidecar>
    );
};

export default ReferenceSapProfitCenterForm;