import React, { useEffect, useState } from 'react';
import {
    Alert,
    Col,
    Form,
    Row,
    Sidecar,
    useToast,
} from '@theorchard/suite-components';
import { isArray } from 'lodash-es';
import { useParams } from 'react-router-dom';
import { useUpdateContract } from 'src/apollo/mutations/contract';
import {
    addContractSummaryNotesMessage,
    updateContractSummaryNotesMessage,
} from 'src/apollo/type-constants/contract';
import './styles.scss';

export interface ContractSummaryNotesFormPropsTypes {
    contractName: string;
    isSidecarOpen: boolean;
    onRequestCloseSidecar: () => void;
    summaryNote?: string | null;
}

export const ContractSummaryNotesForm: React.FC<
    ContractSummaryNotesFormPropsTypes
> = ({ contractName, isSidecarOpen, onRequestCloseSidecar, summaryNote }) => {
    const { contractId } = useParams<{ contractId: string }>();
    const [contractSummaryNotes, setContractSummaryNotes] = useState<
        string | null | undefined
    >(null);
    const [isSaveButtonDisabled, setIsSaveButtonDisabled] =
        useState<boolean>(false);
    const [isAddingOrUpdatingSummaryNotes, setIsAddingOrUpdatingSummaryNotes] =
        useState<boolean>(false);
    const [error, setError] = useState<string | null>(null);

    const toast = useToast();
    const updateContract = useUpdateContract(contractId);

    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        setIsSaveButtonDisabled(!e.target.value.trim());
        setContractSummaryNotes(e.target.value);
    };

    const onSaveHandler = () => {
        setIsSaveButtonDisabled(true);
        setIsAddingOrUpdatingSummaryNotes(true);
        const variables = {
            contractId,
            summaryNote: contractSummaryNotes?.trim(),
        };

        updateContract({ variables })
            .then(() => {
                onRequestCloseSidecar();
                toast(
                    summaryNote
                        ? updateContractSummaryNotesMessage(contractName)
                        : addContractSummaryNotesMessage(contractName)
                );
                setIsSaveButtonDisabled(false);
                setIsAddingOrUpdatingSummaryNotes(false);
            })
            .catch(errors => {
                setIsSaveButtonDisabled(false);
                setIsAddingOrUpdatingSummaryNotes(false);
                if (isArray(errors)) setError(JSON.stringify(errors[0]));
                else setError(errors);
            });
    };

    useEffect(() => {
        setError(null);
        setContractSummaryNotes(summaryNote);
        setIsSaveButtonDisabled(!summaryNote ? true : false);
    }, [isSidecarOpen]);

    return (
        <>
            <Sidecar
                className="ContractSummaryNotesSidecar"
                confirmDisabled={
                    isSaveButtonDisabled || isAddingOrUpdatingSummaryNotes
                }
                isOpen={isSidecarOpen}
                onRequestClose={
                    isAddingOrUpdatingSummaryNotes
                        ? () => false
                        : onRequestCloseSidecar
                }
                onConfirm={onSaveHandler}
                testId="ContractSummaryNotesSidecar"
                title="Contract Summary Notes"
            >
                <Form>
                    <Row>
                        <Col>
                            <Form.Group>
                                <Form.Label>Notes</Form.Label>
                                <Form.Control
                                    as="textarea"
                                    data-testid="contractSummaryNotesInput"
                                    maxLength={280}
                                    name="summaryNote"
                                    onChange={(
                                        e: React.ChangeEvent<HTMLInputElement>
                                    ) => onChangeHandler(e)}
                                    placeholder="Add Contract summary notes"
                                    rows={20}
                                    value={contractSummaryNotes || ''}
                                />
                            </Form.Group>
                        </Col>
                    </Row>
                    <Row>
                        {error && (
                            <Alert
                                className="ErrorMsg"
                                text={error}
                                variant="error"
                            />
                        )}
                    </Row>
                </Form>
            </Sidecar>
        </>
    );
};