import React, { useEffect, useState } from 'react';
import {
    Alert,
    Checkbox,
    Field,
    Form,
    Modal,
} from '@theorchard/suite-components';
import cx from 'classnames';
import {
    useApproveWorksheetPaymentContractAdvanceSalesforceId,
    useConfirmFundsForWorksheetPaymentContractAdvance,
} from 'src/apollo/mutations/contract-advance';
import type { WorksheetPaymentContractAdvanceQuery } from 'src/apollo/queries/payment-group-payment/__generated__/worksheet-payment-contract-advance';
import {
    CONFIRM_FUNDS_CHECKBOX_LABEL,
    CONFIRM_WARNING_ALERT_MSG,
    REVIEW_SALESFORCE_ID_CHECKBOX_LABEL,
} from 'src/components/advance-detail/constants';

type ActionStates =
    WorksheetPaymentContractAdvanceQuery['worksheetPaymentContractAdvance']['actionStates'][0];

export interface FinanceAdminProps {
    isDisabled?: boolean;
    isFeatureAbacusCreateAndApprovePaymentsEnabled?: boolean;
    fundsConfirmed: ActionStates | undefined;
    salesforceIdConfirmed: ActionStates | undefined;
    worksheetPaymentContractAdvanceId: string | undefined;
}

const FinanceAdmin: React.FC<FinanceAdminProps> = ({
    fundsConfirmed,
    isFeatureAbacusCreateAndApprovePaymentsEnabled,
    salesforceIdConfirmed,
    isDisabled,
    worksheetPaymentContractAdvanceId,
}) => {
    const {
        approveContractAdvanceSalesforceId,
        loading: approveContractAdvanceSalesforceIdLoading,
    } = useApproveWorksheetPaymentContractAdvanceSalesforceId();

    const {
        confirmFundsForContractAdvance,
        loading: confirmFundsForContractAdvanceLoading,
    } = useConfirmFundsForWorksheetPaymentContractAdvance();

    const [confirmSalesforceIdModalOpen, setConfirmSalesforceIdModalOpen] =
        useState(false);
    const [confirmFundsModalOpen, setConfirmFundsModalOpenModalOpen] =
        useState(false);

    const [isSalesforceIdConfirmed, setIsSalesforceIdConfirmed] =
        useState(false);
    const [isFundsConfirmed, setIsFundsConfirmed] = useState(false);

    const closeModal = () => {
        setConfirmSalesforceIdModalOpen(false);
        setConfirmFundsModalOpenModalOpen(false);
    };
    const [error, setError] = useState<{
        confirmSalesforceIdErr?: string | null;
        confirmFundsErr?: string | null;
    }>({ confirmSalesforceIdErr: null, confirmFundsErr: null });

    useEffect(() => {
        Boolean(salesforceIdConfirmed) && setIsSalesforceIdConfirmed(true);
        Boolean(fundsConfirmed) && setIsFundsConfirmed(true);
    }, [salesforceIdConfirmed, fundsConfirmed]);

    const onConfirmSalesforceIdHandler = () => {
        setError({});
        const variables = {
            worksheetPaymentContractAdvanceId:
                worksheetPaymentContractAdvanceId || '',
        };
        approveContractAdvanceSalesforceId({ variables })
            .then(() => setIsSalesforceIdConfirmed(true))
            .catch(err => {
                setError({
                    ...error,
                    confirmSalesforceIdErr:
                        err[0].message || JSON.stringify(err),
                });
            });
    };

    const onConfirmFundsHandler = () => {
        setError({});
        const variables = {
            worksheetPaymentContractAdvanceId:
                worksheetPaymentContractAdvanceId || '',
        };
        confirmFundsForContractAdvance({ variables })
            .then()
            .catch(err => {
                setError({
                    ...error,
                    confirmFundsErr: err[0].message || JSON.stringify(err),
                });
            });
    };

    return (
        <div
            className={cx({
                FinanceAdmin: true,
                disabled: isDisabled,
            })}
        >
            <Form>
                <h4>For Finance Admin</h4>
                <div className="step">
                    <Modal
                        className="Advance-payment-approval-sidecar-modal"
                        isOpen={confirmSalesforceIdModalOpen}
                        onRequestClose={closeModal}
                        title="Are you sure you want to confirm Salesforce ID?"
                        onConfirm={() => {
                            closeModal();
                            onConfirmSalesforceIdHandler();
                        }}
                        confirmTitle="Yes, confirm"
                        cancelTitle="No, cancel"
                    >
                        <Alert
                            title="This action cannot be undone!"
                            text="Upon confirming Salesforce ID, no other changes can be made to the payment approval."
                            variant="warn"
                        />
                    </Modal>
                    <div className="circle">2</div>
                    <div className="payment step-line">
                        <div className="payment-title">
                            Review Salesforce ID
                        </div>
                        {!isSalesforceIdConfirmed && (
                            <Alert
                                text={CONFIRM_WARNING_ALERT_MSG}
                                variant="warn"
                            />
                        )}
                        {error.confirmSalesforceIdErr && (
                            <Alert
                                text={error.confirmSalesforceIdErr}
                                variant="error"
                            />
                        )}
                        <Field
                            controlId="salesforceId"
                            labelText=""
                            note={
                                <div className="FormControl-Note confirmation-note">
                                    {salesforceIdConfirmed && (
                                        <>
                                            <div className="FormControl-Note-item">
                                                <div>Confirmed:</div>
                                                <div className="value">
                                                    {salesforceIdConfirmed.lastModified.slice(
                                                        0,
                                                        10
                                                    )}
                                                </div>
                                            </div>
                                            <div className="FormControl-Note-item">
                                                <div>By:</div>
                                                <div className="value">
                                                    {
                                                        salesforceIdConfirmed
                                                            .lastModifiedByIdentity
                                                            ?.name
                                                    }
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            }
                        >
                            <Checkbox
                                checked={isSalesforceIdConfirmed}
                                disabled={
                                    isSalesforceIdConfirmed ||
                                    approveContractAdvanceSalesforceIdLoading ||
                                    !isFeatureAbacusCreateAndApprovePaymentsEnabled
                                }
                                name="salesforceIdConfirmed"
                                onChange={() => {
                                    setConfirmSalesforceIdModalOpen(true);
                                }}
                                label={REVIEW_SALESFORCE_ID_CHECKBOX_LABEL}
                            />
                        </Field>
                        <hr></hr>
                    </div>
                </div>

                <div className="step">
                    <Modal
                        className="Advance-payment-approval-sidecar-modal"
                        isOpen={confirmFundsModalOpen}
                        onRequestClose={closeModal}
                        title="Are you sure you want to confirm Funds?"
                        onConfirm={() => {
                            closeModal();
                            onConfirmFundsHandler();
                        }}
                        confirmTitle="Yes, confirm"
                        cancelTitle="No, cancel"
                    >
                        <></>
                    </Modal>
                    <div className="circle">3</div>
                    <div className="payment step-line step-line-last">
                        <div className="payment-title">Confirm Funds</div>
                        {error.confirmFundsErr && (
                            <Alert
                                text={error.confirmFundsErr}
                                variant="error"
                            />
                        )}
                        <Field
                            controlId="fundsConfirmed"
                            labelText=""
                            note={
                                <div className="FormControl-Note confirmation-note">
                                    {fundsConfirmed && (
                                        <>
                                            <div className="FormControl-Note-item">
                                                <div>Confirmed:</div>
                                                <div className="value">
                                                    {fundsConfirmed.lastModified.slice(
                                                        0,
                                                        10
                                                    )}
                                                </div>
                                            </div>
                                            <div className="FormControl-Note-item">
                                                <div>By:</div>
                                                <div className="value">
                                                    {
                                                        fundsConfirmed
                                                            .lastModifiedByIdentity
                                                            ?.name
                                                    }
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            }
                        >
                            <Checkbox
                                checked={isFundsConfirmed}
                                disabled={
                                    !salesforceIdConfirmed ||
                                    isFundsConfirmed ||
                                    confirmFundsForContractAdvanceLoading ||
                                    !isFeatureAbacusCreateAndApprovePaymentsEnabled
                                }
                                name="fundsConfirmed"
                                onChange={() => {
                                    setConfirmFundsModalOpenModalOpen(true);
                                }}
                                label={CONFIRM_FUNDS_CHECKBOX_LABEL}
                            />
                        </Field>
                    </div>
                </div>
            </Form>
        </div>
    );
};

export default FinanceAdmin;