import React, { useEffect } from 'react';
import {
    Alert,
    Checkbox,
    DatePicker,
    Field,
    Form,
    Row,
    Col,
    HelpTooltip,
} from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import {
    WHT_TOOLTIP_MSG,
    VAT_TOOLTIP_MSG,
    US_SOURCE_INCOME_TOOLTIP_MSG,
    POST_TAX_PAYABLE_TOOLTIP_MSG,
} from 'src/apollo/type-constants/advance';
import YesNoSelect from 'src/components/shared/yes-no-select';
import {
    ADVANCES_DEFAULT_REFERENCE_PAYMENT_TYPE_ALERT,
    APPROVAL_CONFIRMATION_CHECKBOX_LABEL,
    DEFAULT_REFERENCE_PAYMENT_TYPE,
    MAX_CHARACTERS,
    PAYMENT_CONFIRMATION_ALLOCATED_FUNDS_CHECKBOX_LABEL,
    PAYMENT_CONFIRMATION_CHECKBOX_LABEL,
    REFERENCE_PAYMENT_TYPE_ID,
} from 'src/constants';
import ReferencePaymentTypeSelect from './reference-payment-type-select';
import type { GetContractAdvanceQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advance';
import { YYYY_MM_DD } from '@theorchard/accounting-apps-shared';

type AbacusContractAdvance = NonNullable<
    GetContractAdvanceQuery['abacusContractAdvance']
>;

interface IFormData extends AbacusContractAdvance {
    milestoneReached: 'yes' | 'no';
    milestoneDate: string;
    approvalConfirmation: boolean;
    paymentConfirmation: boolean;
}

export interface AdvanceFormFieldsPaymentPropTypes {
    amountAfterWithholdingAndVat: number;
    // eslint-disable-next-line no-unused-vars
    changeHandler: (params: object) => void;
    defaultReferencePaymentTypeIsSelected: boolean;
    errors: {
        paymentConfirmation: string;
        withholdingTaxAmount: string;
        usSourceIncomeRate: string;
        vatAmount: string;
        note: string;
        milestoneDate: string;
    };
    formData: IFormData;
}

export const AdvanceFormFieldsPayment: React.FC<
    AdvanceFormFieldsPaymentPropTypes
> = ({
    amountAfterWithholdingAndVat,
    changeHandler,
    errors,
    formData,
    defaultReferencePaymentTypeIsSelected,
}) => {
    useEffect(() => {
        if (!formData.referencePaymentType) {
            //Payment method option should default to “Payoneer via Abacus”
            changeHandler({
                target: {
                    name: 'referencePaymentType',
                    value: DEFAULT_REFERENCE_PAYMENT_TYPE,
                },
            });
        }
    }, [formData]);

    const approvalConfirmationIsDisabled =
        formData.milestoneReached === 'no' ||
        defaultReferencePaymentTypeIsSelected;

    const approvalConfirmationIsChecked =
        (formData.approvalConfirmation &&
            !defaultReferencePaymentTypeIsSelected) ||
        false;

    const paymentConfirmationIsDisabled =
        !formData.approvalConfirmation || defaultReferencePaymentTypeIsSelected;

    const paymentConfirmationIsChecked =
        (formData.paymentConfirmation &&
            !defaultReferencePaymentTypeIsSelected) ||
        false;

    const paymentConfirmationLabel =
        formData.referencePaymentType?.referencePaymentTypeId ===
        REFERENCE_PAYMENT_TYPE_ID.ALLOCATED_FUNDS
            ? PAYMENT_CONFIRMATION_ALLOCATED_FUNDS_CHECKBOX_LABEL
            : PAYMENT_CONFIRMATION_CHECKBOX_LABEL;

    return (
        <div className="FormFieldsSection">
            <h3>Advance Payment Fields</h3>
            <div className="smallBodyText">
                The below fields are required for advance payment to be
                completed successfully
            </div>
            <Row>
                <Col sm={6}>
                    <Field
                        controlId="withholdingTaxAmount"
                        labelText="WHT"
                        errorMessage={errors.withholdingTaxAmount}
                        className="withTooltip"
                    >
                        <HelpTooltip
                            id="WhtTooltip"
                            message={WHT_TOOLTIP_MSG}
                            tooltipPlacement="right"
                        />
                        <div
                            className="FormControlGroup"
                            data-testid="withholdingTaxAmount"
                        >
                            <Form.Control
                                name="withholdingTaxAmount"
                                onChange={changeHandler}
                                placeholder="Amount here"
                                type="text"
                                value={
                                    formData.withholdingTaxAmount?.toString() ||
                                    ''
                                }
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="vatAmount"
                        labelText="VAT"
                        errorMessage={errors.vatAmount}
                        className="withTooltip"
                    >
                        <HelpTooltip
                            id="VatAmountTooltip"
                            message={VAT_TOOLTIP_MSG}
                            tooltipPlacement="right"
                        />
                        <div
                            className="FormControlGroup"
                            data-testid="vatAmount"
                        >
                            <Form.Control
                                name="vatAmount"
                                onChange={changeHandler}
                                placeholder="Amount here"
                                type="text"
                                value={formData.vatAmount?.toString() || ''}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="usSourceIncomeRate"
                        labelText="US Source Income %"
                        errorMessage={errors.usSourceIncomeRate}
                        className="withTooltip optional"
                    >
                        <HelpTooltip
                            id="UsSourceIncomeTooltip"
                            message={US_SOURCE_INCOME_TOOLTIP_MSG}
                            tooltipPlacement="right"
                        />
                        <span className="text-muted">(Optional)</span>
                        <div
                            className="FormControlGroup"
                            data-testid="usSourceIncomeRate"
                        >
                            <Form.Control
                                name="usSourceIncomeRate"
                                onChange={changeHandler}
                                placeholder="Add percentage here"
                                type="text"
                                value={
                                    formData.usSourceIncomeRate?.toString() ||
                                    ''
                                }
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="amountAfterWithholdingAndVat"
                        labelText="Post Tax Payable Amount"
                        errorMessage={errors.usSourceIncomeRate}
                        className="withTooltip"
                    >
                        <HelpTooltip
                            id="PostTaxPayableTooltip"
                            message={POST_TAX_PAYABLE_TOOLTIP_MSG}
                            tooltipPlacement="right"
                        />
                        <div
                            className="FormControlGroup"
                            data-testid="usSourceIncomeRate"
                        >
                            <Form.Control
                                disabled
                                name="amountAfterWithholdingAndVat"
                                onChange={changeHandler}
                                placeholder="Calculated as WHT+VAT+Amount"
                                type="text"
                                value={
                                    (amountAfterWithholdingAndVat &&
                                        amountAfterWithholdingAndVat.toFixed(
                                            2
                                        )) ||
                                    ''
                                }
                            />
                        </div>
                    </Field>
                </Col>
                <Col sm={6}>
                    <Field
                        controlId="milestoneReached"
                        labelText="Milestone Reached?"
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="milestoneReachedTestId"
                        >
                            <YesNoSelect
                                className="MilestoneReached"
                                isClearable={false}
                                id="milestoneReached"
                                onChange={(e: any) => {
                                    changeHandler({
                                        target: {
                                            name: 'milestoneReached',
                                            value: e.value,
                                        },
                                    });
                                }}
                                name="milestoneReached"
                                value={formData.milestoneReached}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="milestoneDate"
                        labelText="Milestone Reached On"
                        errorMessage={errors.milestoneDate}
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="milestoneDateTestId"
                        >
                            <DatePicker
                                isClearable={true}
                                disabled={formData.milestoneReached === 'no'}
                                placeholder={YYYY_MM_DD}
                                onChange={(e: any) =>
                                    changeHandler({
                                        target: {
                                            name: 'milestoneDate',
                                            value: e,
                                        },
                                    })
                                }
                                selectedValue={formData.milestoneDate}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="paymentNotes"
                        labelText="Advance Payment Notes"
                        errorMessage={errors.note}
                        className="paymentNotes optional"
                    >
                        <span className="text-muted">(Optional)</span>
                        <div
                            className="FormControlGroup"
                            data-testid="paymentNotesTestId"
                        >
                            <Form.Control
                                as="textarea"
                                name="note"
                                onChange={changeHandler}
                                value={formData.note || ''}
                            />
                            <p className="Character-count">
                                {`${
                                    !isEmpty(formData.note)
                                        ? formData?.note?.length
                                        : 0
                                }/${MAX_CHARACTERS}`}
                            </p>
                        </div>
                    </Field>
                    <Field
                        testId="referencePaymentType"
                        controlId="referencePaymentType"
                        labelText="Payment Method"
                    >
                        <ReferencePaymentTypeSelect
                            name="referencePaymentType"
                            id="referencePaymentType"
                            value={{
                                label:
                                    formData.referencePaymentType?.notes || '',
                                value:
                                    formData.referencePaymentType
                                        ?.referencePaymentTypeId || '',
                            }}
                            onChange={(e: { label: string; value: string }) => {
                                changeHandler({
                                    target: {
                                        name: 'referencePaymentType',
                                        value: {
                                            notes: e.label,
                                            referencePaymentTypeId: e.value,
                                        },
                                    },
                                });
                            }}
                        />
                    </Field>
                    {defaultReferencePaymentTypeIsSelected ? (
                        <Alert
                            title={
                                ADVANCES_DEFAULT_REFERENCE_PAYMENT_TYPE_ALERT.title
                            }
                            text={
                                ADVANCES_DEFAULT_REFERENCE_PAYMENT_TYPE_ALERT.text
                            }
                            variant="information"
                        />
                    ) : (
                        <>
                            <Field
                                controlId="approvalConfirmation"
                                labelText="Approval Confirmation"
                            >
                                <div
                                    className="FormControlGroup"
                                    data-testid="approvalConfirmationTestId"
                                >
                                    <Checkbox
                                        disabled={
                                            approvalConfirmationIsDisabled
                                        }
                                        checked={approvalConfirmationIsChecked}
                                        name="approvalConfirmation"
                                        onChange={() =>
                                            changeHandler({
                                                target: {
                                                    name: 'approvalConfirmation',
                                                    value: !formData.approvalConfirmation,
                                                },
                                            })
                                        }
                                        label={
                                            APPROVAL_CONFIRMATION_CHECKBOX_LABEL
                                        }
                                    />
                                </div>
                            </Field>
                            <Field
                                controlId="paymentConfirmation"
                                labelText="Payment Confirmation"
                                errorMessage={errors.paymentConfirmation}
                            >
                                <div
                                    className="FormControlGroup"
                                    data-testid="paymentConfirmationTestId"
                                >
                                    <Checkbox
                                        disabled={paymentConfirmationIsDisabled}
                                        checked={paymentConfirmationIsChecked}
                                        name="paymentConfirmation"
                                        onChange={() =>
                                            changeHandler({
                                                target: {
                                                    name: 'paymentConfirmation',
                                                    value: !formData.paymentConfirmation,
                                                },
                                            })
                                        }
                                        label={paymentConfirmationLabel}
                                    />
                                </div>
                            </Field>
                        </>
                    )}
                </Col>
            </Row>
        </div>
    );
};