import React, { type Dispatch, type SetStateAction } from 'react';
import {
    Button,
    Field,
    Form,
    Select,
    Tooltip,
} from '@theorchard/suite-components';
import type { ListViewItem } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { PaymentEntityMultiSelect } from 'src/components/shared/payment-entity-multiselect';
import { PaymentScheduleMultiSelect } from 'src/components/shared/payment-schedule-multiselect';
import {
    AUTO_GENERATE_BATCH_TYPE_HELP_TEXT,
    AUTO_GENERATE_BUTTON_TOOLTIP_MSG,
    BATCH_TYPE_OPTIONS,
} from 'src/apollo/type-constants/adjustment';
import { ChangeHandlerEvent } from 'src/types/change-handler';
import { GenerateAdjustmentBatchInput } from 'src/types/abacus-contract-flowthrough';

export interface GenerateAdjustmentsFormFieldsPropTypes {
    changeHandler: (
        e: React.ChangeEvent<HTMLInputElement> | ChangeHandlerEvent
    ) => void;
    formData: GenerateAdjustmentBatchInput;
    isGenerating: boolean;
    handleGenerate: () => void;
    setStep: Dispatch<SetStateAction<number>>;
    step: number;
}

export const GenerateAdjustmentsFormFields: React.FC<
    GenerateAdjustmentsFormFieldsPropTypes
> = ({
    changeHandler,
    formData,
    isGenerating,
    handleGenerate,
    setStep,
    step,
}) => {
    const isGenerateDisabled =
        isGenerating ||
        formData.referencePaymentEntities.length === 0 ||
        formData.paymentSchedules.length === 0 ||
        formData.fileName.trim() === '';

    return (
        <Page.Col>
            <Form.Group controlId="BatchTypeField">
                <Field
                    controlId="GenerateAdjustments-Label"
                    labelText="Batch Type"
                    isRequired
                >
                    <>
                        <Select
                            className="GenerateAdjustments-BatchTypeSelect"
                            id="batchType"
                            options={BATCH_TYPE_OPTIONS}
                            selectedValue={formData.batchType}
                            onChange={option =>
                                changeHandler({
                                    target: {
                                        name: 'batchType',
                                        value: option?.value,
                                    },
                                })
                            }
                            testId="batchTypeSelect"
                            disabled
                        />
                        <div className="GenerateAdjustments-HelpText">
                            {AUTO_GENERATE_BATCH_TYPE_HELP_TEXT}
                        </div>
                    </>
                </Field>
                {step === 1 && (
                    <Button
                        variant="primary"
                        className="GenerateAdjustments-NextButton"
                        data-testid="generateAdjustmentsNextButton"
                        onClick={() => setStep(2)}
                        size="lg"
                    >
                        NEXT
                    </Button>
                )}
                {step === 2 && (
                    <>
                        <Form.Group controlId="PaidByField">
                            <Field
                                controlId="GenerateAdjustments-PaidBy"
                                labelText="Paid By(s)"
                                isRequired
                            >
                                <PaymentEntityMultiSelect
                                    menuMaxWidth={300}
                                    menuMinWidth="100%"
                                    onChange={(
                                        items: ListViewItem[] | undefined
                                    ) =>
                                        changeHandler({
                                            target: {
                                                name: 'referencePaymentEntities',
                                                value: items
                                                    ? items.map(
                                                          ({ value }) => value
                                                      )
                                                    : [],
                                            },
                                        })
                                    }
                                    value={
                                        formData.referencePaymentEntities || []
                                    }
                                />
                            </Field>
                        </Form.Group>
                        <Form.Group controlId="PaymentScheduleSelectField">
                            <Field
                                controlId="GenerateAdjustments-PaymentScheduleSelect"
                                labelText="Payment Schedule(s)"
                                isRequired
                            >
                                <PaymentScheduleMultiSelect
                                    menuMaxWidth={300}
                                    menuMinWidth="100%"
                                    onChange={(
                                        items: ListViewItem[] | undefined
                                    ) =>
                                        changeHandler({
                                            target: {
                                                name: 'paymentSchedules',
                                                value: items
                                                    ? items.map(
                                                          ({ value }) => value
                                                      )
                                                    : [],
                                            },
                                        })
                                    }
                                    value={formData?.paymentSchedules || []}
                                />
                            </Field>
                        </Form.Group>
                        <Form.Group controlId="FileNameField">
                            <Field
                                controlId="GenerateAdjustments-FileName"
                                labelText="File Name"
                                isRequired
                            >
                                <Form.Control
                                    className="GenerateAdjustments-FileNameInput"
                                    data-testid="fileNameInput"
                                    name="fileName"
                                    placeholder="Input File Name"
                                    onChange={(
                                        e: React.ChangeEvent<HTMLInputElement>
                                    ) =>
                                        changeHandler({
                                            target: {
                                                name: 'fileName',
                                                value: e.target.value,
                                            },
                                        })
                                    }
                                    type="text"
                                    value={formData.fileName}
                                />
                            </Field>
                        </Form.Group>
                        <div className="GenerateAdjustments-GenerateButton">
                            <Tooltip
                                id="generateTooltip"
                                placement="right"
                                message={AUTO_GENERATE_BUTTON_TOOLTIP_MSG}
                            >
                                <Button
                                    variant="primary"
                                    data-testid="generateAdjustmentsGenerateButton"
                                    disabled={isGenerateDisabled}
                                    onClick={handleGenerate}
                                >
                                    {isGenerating ? (
                                        <>
                                            GENERATE...&nbsp;
                                            <GlyphIcon
                                                name="inProgress"
                                                size={16}
                                            />
                                        </>
                                    ) : (
                                        'GENERATE'
                                    )}
                                </Button>
                            </Tooltip>
                        </div>
                    </>
                )}
            </Form.Group>
        </Page.Col>
    );
};