import React, { useState } from 'react';
import {
    Alert,
    Button,
    FullscreenModal,
    useFullscreenModal,
} from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { useHistory, useParams } from 'react-router-dom';
import { useSaveHandler } from 'src/hooks/contract-flowthrough/create-contract-flowthrough';
import { getContractDetail } from 'src/urls/frontend-royalties';
import { isSaveButtonDisabled } from 'src/utils/contract-flowthrough-save-button-validation';
import { ContractFlowthroughFormFields } from '../contract-flowthrough-shared/contract-flowthrough-form-fields';
import type { AbacusContractFlowthroughInput } from 'src/apollo/definitions/globalTypes';
import type { AbacusContractFlowthroughErrors } from 'src/types/abacus-contract-flowthrough-input-errors';

export const ContractFlowthroughFullScreenModal: React.FC = () => {
    const { contractId } = useParams<{ contractId: string }>();
    const history = useHistory();
    const { close } = useFullscreenModal();
    const closeModal = () => {
        close(() => history.push(getContractDetail(contractId)));
    };
    const saveHandler = useSaveHandler(contractId);

    const [errors, setErrors] = useState<AbacusContractFlowthroughErrors>({});
    const [serverError, setServerError] = useState<string | null>(null);
    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

    const [abacusContractFlowthrough, setAbacusContractFlowthrough] = useState<
        Partial<AbacusContractFlowthroughInput>
    >({
        flowthroughRate: undefined,
        referenceFlowthroughCalculationId: '',
        recoupmentCap: 0,
        calculationComment: null,
        hasAutomaticShutoff: true,
    });

    const handleSave = async () => {
        setIsSubmitting(true);
        try {
            if (abacusContractFlowthrough) {
                await saveHandler(
                    abacusContractFlowthrough as AbacusContractFlowthroughInput
                );
                history.push(getContractDetail(contractId));
            }
        } catch (e) {
            let errorMessage = 'Failed to create contract flowthrough.';
            if (e instanceof Error) {
                errorMessage = `Error: ${e.message}, ${errorMessage}`;
            } else if (Array.isArray(e)) {
                errorMessage = ` Error: ${JSON.stringify(e[0])}, ${errorMessage}`;
            } else {
                errorMessage = `Error: ${String(e)}, ${errorMessage}`;
            }
            setServerError(errorMessage);
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <FullscreenModal
            layout="fluid"
            className="ContractFlowthroughFullScreenModal"
        >
            <FullscreenModal.Header title="Add Flowthrough">
                <Button
                    variant="secondary"
                    onClick={closeModal}
                    className="ContractFlowthroughFullScreenModal-CancelButton"
                    data-testid="contractFlowthroughCancelButton"
                >
                    Cancel
                </Button>
            </FullscreenModal.Header>
            <FullscreenModal.Title title={formatMessage('Set up Flowthrough')}>
                Set up the calculation for flowthrough for this contract.
                <br />
                You&apos;ll be able to edit it later
            </FullscreenModal.Title>
            <FullscreenModal.Body>
                {serverError && (
                    <Alert
                        variant="error"
                        text={
                            <span>
                                {serverError}
                                <br />
                                &nbsp;Please contact the Abacus team.
                            </span>
                        }
                    />
                )}
                <ContractFlowthroughFormFields
                    abacusContractFlowthrough={abacusContractFlowthrough}
                    setAbacusContractFlowthrough={contractFlowthrough =>
                        setAbacusContractFlowthrough(
                            contractFlowthrough as Partial<AbacusContractFlowthroughInput>
                        )
                    }
                    isEditForm={false}
                    errors={errors}
                    setErrors={setErrors}
                    serverErrors={serverError}
                    setServerErrors={setServerError}
                />
                <Button
                    className="ContractFlowthroughFullScreenModal-SaveButton"
                    variant="primary"
                    data-testid="contractFlowthroughSaveButton"
                    disabled={
                        isSaveButtonDisabled(
                            abacusContractFlowthrough,
                            errors
                        ) || isSubmitting
                    }
                    onClick={handleSave}
                >
                    Save
                </Button>
            </FullscreenModal.Body>
        </FullscreenModal>
    );
};