import React, { useEffect, useState } from 'react';
import { Alert, Sidecar } from '@theorchard/suite-components';
import { useSaveHandler } from 'src/hooks/contract-flowthrough/update-contract-flowthrough';
import { isSaveButtonDisabled } from 'src/utils/contract-flowthrough-save-button-validation';
import { ContractFlowthroughFormFields } from '../contract-flowthrough-shared/contract-flowthrough-form-fields';
import type { AbacusContractFlowthroughUpdate } from 'src/apollo/definitions/globalTypes';
import type { AbacusContractFlowthrough } from 'src/types/abacus-contract-flowthrough';
import type { AbacusContractFlowthroughErrors } from 'src/types/abacus-contract-flowthrough-input-errors';
import './styles.scss';

export interface ContractFlowthroughSidecarProps {
    contractFlowthrough: AbacusContractFlowthrough;
    isSidecarOpen: boolean;
    // eslint-disable-next-line no-unused-vars
    setIsSidecarOpen: (isOpen: boolean) => void;
}

export const ContractFlowthroughSidecar: React.FC<
    ContractFlowthroughSidecarProps
> = ({ contractFlowthrough, isSidecarOpen, setIsSidecarOpen }) => {
    const [errors, setErrors] = useState<AbacusContractFlowthroughErrors>({});
    const [serverError, setServerError] = useState<string | null>(null);

    useEffect(() => {
        if (contractFlowthrough) {
            setAbacusContractFlowthrough({
                calculationComment: contractFlowthrough.calculationComment,
                flowthroughRate: contractFlowthrough.flowthroughRate,
                referenceFlowthroughCalculationId:
                    contractFlowthrough.referenceFlowthroughCalculation
                        .referenceFlowthroughCalculationId,
                recoupmentCap: contractFlowthrough.recoupmentCap,
                hasAutomaticShutoff: contractFlowthrough.hasAutomaticShutoff,
                flowthroughStatus:
                    contractFlowthrough.flowthroughStatus || 'ACTIVE',
                contractFlowthroughId:
                    contractFlowthrough.contractFlowthroughId,
            });
        }
    }, [contractFlowthrough, isSidecarOpen]);

    const [abacusContractFlowthrough, setAbacusContractFlowthrough] =
        useState<AbacusContractFlowthroughUpdate>(contractFlowthrough!);

    const saveHandler = useSaveHandler();

    const handleSave = async () => {
        try {
            if (abacusContractFlowthrough) {
                await saveHandler(abacusContractFlowthrough);
                setIsSidecarOpen(false);
            }
        } catch (e) {
            if (e instanceof Error)
                setServerError(
                    `Error: ${e.message}, Failed to create contract flowthrough.`
                );

            if (Array.isArray(e))
                setServerError(
                    `Error: ${JSON.stringify(e[0])}, Failed to create contract flowthrough.`
                );
            else
                setServerError(
                    `Error: ${String(e)}, Failed to create contract flowthrough.`
                );
        }
    };
    return (
        <>
            <Sidecar
                testId="contractFlowthroughSidecar"
                isOpen={isSidecarOpen}
                title="Flowthrough"
                confirmDisabled={isSaveButtonDisabled(
                    abacusContractFlowthrough,
                    errors
                )}
                onConfirm={handleSave}
                onRequestClose={() => setIsSidecarOpen(false)}
                className="ContractFlowthroughSidecar"
            >
                {serverError && (
                    <Alert
                        variant="error"
                        text={
                            <span>
                                {serverError}
                                <br />
                                &nbsp;Please contact the Abacus team.
                            </span>
                        }
                    />
                )}
                <ContractFlowthroughFormFields
                    abacusContractFlowthrough={abacusContractFlowthrough}
                    setAbacusContractFlowthrough={params =>
                        setAbacusContractFlowthrough(
                            params as AbacusContractFlowthroughUpdate
                        )
                    }
                    isEditForm={true}
                    errors={errors}
                    setErrors={setErrors}
                    serverErrors={serverError}
                    setServerErrors={setServerError}
                />
            </Sidecar>
        </>
    );
};