import React from 'react';
import {
    Alert,
    Field,
    Form,
    Row,
    Col,
    HelpTooltip,
} from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { AMOUNT_TOOLTIP_MSG } from 'src/apollo/type-constants/advance';
import CurrencySelect from 'src/components/shared/currency-select';
import MilestonesSelect from 'src/components/shared/milestones-select';
import { ADVANCES_CURRENCY_WARNING_ALERT, MAX_CHARACTERS } from 'src/constants';
import type { GetContractAdvanceQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advance';

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

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

export interface AdvanceFormFieldsCreationPropTypes {
    changeHandler: (params: object) => void;
    errors: {
        advanceDescription: string;
        amount: string;
        currencyCode: string;
        milestone: string;
        milestoneDescription: string;
    };
    formData: IFormData;
    showCurrencyWarning: boolean;
}

export const AdvanceFormFieldsCreation: React.FC<
    AdvanceFormFieldsCreationPropTypes
> = ({ changeHandler, errors, formData, showCurrencyWarning }) => {
    return (
        <div className="FormFieldsSection">
            <h3>Advance Creation Fields</h3>
            <div className="smallBodyText">
                The below fields are required for advance to be created
                successfully
            </div>
            <Row>
                <Col sm={6}>
                    <Field
                        controlId="paymentDescription"
                        labelText="Payment Description"
                        errorMessage={errors.advanceDescription}
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="paymentDescriptionTestId"
                        >
                            <Form.Control
                                name="advanceDescription"
                                onChange={changeHandler}
                                type="text"
                                value={formData.advanceDescription || ''}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="amount"
                        labelText="Pre Tax Amount"
                        errorMessage={errors.amount}
                        className="withTooltip"
                    >
                        <span data-testid="AmountTooltip">
                            <HelpTooltip
                                id="AmountTooltip"
                                message={AMOUNT_TOOLTIP_MSG}
                                tooltipPlacement="right"
                            />
                        </span>
                        <div
                            className="FormControlGroup"
                            data-testid="amountTestId"
                        >
                            <Form.Control
                                name="amount"
                                onChange={changeHandler}
                                type="text"
                                value={formData.amount || ''}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="currency"
                        labelText="Currency"
                        errorMessage={errors.currencyCode}
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="currencyTestId"
                        >
                            <CurrencySelect
                                isClearable={false}
                                className="CurrencyCode"
                                id="currencyCode"
                                name="currencyCode"
                                placeholder="-- Select --"
                                onChange={(e: any) =>
                                    changeHandler({
                                        target: {
                                            name: 'currencyCode',
                                            value: e.value,
                                        },
                                    })
                                }
                                value={formData.currencyCode}
                            />
                        </div>
                    </Field>
                    {showCurrencyWarning && (
                        <Alert
                            className="currency-warning"
                            variant="warn"
                            text={ADVANCES_CURRENCY_WARNING_ALERT.text}
                        />
                    )}
                </Col>
                <Col sm={6}>
                    <Field
                        controlId="milestone"
                        labelText="Milestone to Qualify for Payment"
                        errorMessage={errors.milestone}
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="milestoneTestId"
                        >
                            <MilestonesSelect
                                className="Milestone"
                                name="milestone"
                                id="milestone"
                                placeholder="-- Select --"
                                onChange={(e: any) =>
                                    changeHandler({
                                        target: {
                                            name: 'milestone',
                                            value: e && e.value,
                                        },
                                    })
                                }
                                value={formData.milestone}
                            />
                        </div>
                    </Field>
                    <Field
                        controlId="milestoneDescription"
                        labelText="Milestone Description"
                        errorMessage={errors.milestoneDescription}
                    >
                        <div
                            className="FormControlGroup"
                            data-testid="milestoneDescriptionTestId"
                        >
                            <Form.Control
                                as="textarea"
                                name="milestoneDescription"
                                onChange={changeHandler}
                                value={formData.milestoneDescription}
                                maxLength={MAX_CHARACTERS}
                            />
                            <p className="Character-count">
                                {`${
                                    !isEmpty(formData.milestoneDescription)
                                        ? formData.milestoneDescription.length
                                        : 0
                                }/${MAX_CHARACTERS}`}
                            </p>
                        </div>
                    </Field>
                </Col>
            </Row>
        </div>
    );
};