import React from 'react';
import { Alert, Field, Form } from '@theorchard/suite-components';
import AgreementTypeDropdown from 'src/components/shared/agreement-type-dropdown';
import CurrencySelect from 'src/components/shared/currency-select';
import PaymentEntitySelect from 'src/components/shared/payment-entity-select';
import PaymentScheduleSelect from 'src/components/shared/payment-schedule-select';
import type {
    CustomChangeEvent,
    PaymentGroupFormFields,
} from 'src/types/payment-group';

export interface NewPaymentGroupFormFieldsPropTypes {
    changeHandler: (
        e: React.ChangeEvent<HTMLInputElement> | CustomChangeEvent
    ) => void;
    error: string | null;
    formData: Partial<PaymentGroupFormFields>;
}

export const NewPaymentGroupFormFields: React.FC<
    NewPaymentGroupFormFieldsPropTypes
> = ({ changeHandler, error, formData }) => {
    return (
        <div className="PaymentNewGroupForm">
            {error && (
                <Alert
                    className="PaymentNewGroupForm-Error"
                    variant="error"
                    text={error}
                />
            )}
            <Form.Group className="PaymentNewGroupFormFields">
                <Field controlId="PaymentGroupName" labelText="Group Name">
                    <input
                        className="form-control"
                        data-testid="payment-group-name"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            changeHandler(e)
                        }
                        name="groupName"
                        placeholder="Enter Group Name"
                        type="text"
                        value={formData?.groupName || ''}
                    />
                </Field>
                <Field controlId="PaymentCurrency" labelText="Payment Currency">
                    <CurrencySelect
                        className="paymentCurrency"
                        isClearable={true}
                        id="paymentCurrency"
                        isMultiSelect={true}
                        name="paymentCurrency"
                        onChange={(e: Array<Record<string, string>>) =>
                            changeHandler({
                                target: {
                                    name: 'currencyCodes',
                                    value: e && e.map(({ value }) => value),
                                },
                            })
                        }
                        placeholder="All"
                        value={(formData?.currencyCodes || []) as any}
                    />
                </Field>
                <Field controlId="PaymentPaidBy" labelText="Paid By">
                    <PaymentEntitySelect
                        className="paymentEntity"
                        isClearable={true}
                        id="paymentEntity"
                        name="paymentEntity"
                        onChange={(e: Record<string, string>) =>
                            changeHandler({
                                target: {
                                    name: 'referencePaymentEntities',
                                    value: e && [e.value],
                                },
                            })
                        }
                        placeholder="Select One"
                        value={
                            (formData?.referencePaymentEntities || []) as any
                        }
                    />
                </Field>
                <Field controlId="paymentSchedule" labelText="Payment Schedule">
                    <PaymentScheduleSelect
                        className="paymentSchedule"
                        isClearable={true}
                        isMultiSelect={true}
                        id="paymentSchedule"
                        name="paymentSchedule"
                        onChange={(e: Array<Record<string, string>>) =>
                            changeHandler({
                                target: {
                                    name: 'paymentSchedules',
                                    value: e && e.map(({ value }) => value),
                                },
                            })
                        }
                        placeholder="All"
                        value={(formData?.paymentSchedules || []) as any}
                    />
                </Field>
                <Field controlId="agreementType" labelText="Agreement Type">
                    <AgreementTypeDropdown
                        className="agreementType"
                        isClearable={true}
                        isSearchable={true}
                        isMultiSelect={true}
                        id="agreementType"
                        name="agreementType"
                        onChange={(e: Array<Record<string, string>>) =>
                            changeHandler({
                                target: {
                                    name: 'referenceAgreementTypes',
                                    value: e && e.map(({ value }) => value),
                                },
                            })
                        }
                        placeholder="All"
                        selectedValue={
                            (formData?.referenceAgreementTypes || []) as any
                        }
                    />
                </Field>
            </Form.Group>
        </div>
    );
};

export default NewPaymentGroupFormFields;