import React, { useEffect } from 'react';
import { Form, Label } from '@theorchard/suite-components';
import AccountSearchDropdown from 'src/components/payment-group-form/components/accounts-search-dropdown';
import useAccountSearch from 'src/hooks/account-search';
import type { ChangeHandlerArgs } from 'src/types/change-handler';
import type { PaymentGroupFormData } from 'src/types/payment-group-form';

interface PaymentSpecificAdvancePropTypes {
    changeHandler: (params: ChangeHandlerArgs) => void;
    formData: Partial<PaymentGroupFormData>;
    setAccountName: (name?: string) => void;
}

export default function PaymentSpecificAccount({
    changeHandler,
    formData,
    setAccountName,
}: PaymentSpecificAdvancePropTypes) {
    const { accountId, accountName } = useAccountSearch({
        clearable: true,
        selectedOption: formData.accountId,
    });

    useEffect(
        () =>
            changeHandler({
                target: { name: 'accountId', value: accountId ?? '' },
            }),
        [accountId]
    );

    useEffect(() => setAccountName(accountName), [accountName]);

    const onChangeHandler = (selectedOptions: any) => {
        changeHandler({
            target: { name: 'accountOptions', value: selectedOptions },
        });
    };

    return (
        <div
            className="PaymentGroupFormFieldsGroup"
            data-testid="PaymentSpecificAccounts"
        >
            <div>
                <Label text="Account(s)" />
                <AccountSearchDropdown
                    onChange={onChangeHandler}
                    selectedValue={formData.accountOptions}
                    isMultiSelect
                />
            </div>
            <div>
                <Label text="Payment Name" />
                <Form.Control
                    data-testid="input-payment-name"
                    name="paymentName"
                    onChange={e => changeHandler(e)}
                    placeholder="Enter Payment Name"
                    type="text"
                />
            </div>
        </div>
    );
}