import React from 'react';
import { Page } from '@theorchard/suite-frontend';
import { AdjustmentsAccountsSelect } from 'src/components/adjustments/adjustments-accounts-select';
import { ApplyToFlowthroughPaymentSelect } from 'src/components/adjustments/apply-to-flowthrough-payment-select';
import { AdjustmentsContractsSelect } from 'src/components/adjustments/adjustments-contracts-select';
import type { ListViewItem } from '@theorchard/suite-components';
import type { AdjustmentsFilter } from 'src/types/adjustment';

export interface AdjustmentsBatchFiltersPropTypes {
    areAllFiltersCleared: boolean;
    filters: Partial<AdjustmentsFilter>;
    changeHandler: (
        fieldName: keyof AdjustmentsFilter,
        value: string | string[] | null | undefined
    ) => void;
}

export const AdjustmentsBatchFilters: React.FC<
    AdjustmentsBatchFiltersPropTypes
> = ({ changeHandler, filters, areAllFiltersCleared }) => {
    return (
        <Page>
            <Page.Row>
                <>
                    <div className="AdjustmentsAccountsSelectFilter">
                        <AdjustmentsAccountsSelect
                            compact={true}
                            isFilterCleared={areAllFiltersCleared}
                            menuMaxWidth={400}
                            onChange={(e: ListViewItem[] | undefined) =>
                                changeHandler(
                                    'accountIds',
                                    e &&
                                        e.map(
                                            ({ value }: ListViewItem) => value
                                        )
                                )
                            }
                            optionTagMaxWidth={250}
                            truncatedTextMaxWidth={400}
                        />
                    </div>
                    <div className="AdjustmentsContractsSelectFilter">
                        <AdjustmentsContractsSelect
                            compact={true}
                            isFilterCleared={areAllFiltersCleared}
                            menuMaxWidth={400}
                            onChange={(e: ListViewItem[] | undefined) =>
                                changeHandler(
                                    'contractIds',
                                    e &&
                                        e.map(
                                            ({ value }: ListViewItem) => value
                                        )
                                )
                            }
                            optionTagMaxWidth={250}
                            truncatedTextMaxWidth={400}
                        />
                    </div>
                    <div className="AdjustmentsApplyToFlowthroughPaymentFilter">
                        <ApplyToFlowthroughPaymentSelect
                            compact={true}
                            onChange={(e: ListViewItem[] | undefined) =>
                                changeHandler(
                                    'applyToFlowthroughPayment',
                                    e &&
                                        e.map(
                                            ({ value }: ListViewItem) => value
                                        )
                                )
                            }
                            placeholder="Apply To Flowthrough Payment"
                            value={filters?.applyToFlowthroughPayment || []}
                        />
                    </div>
                </>
            </Page.Row>
        </Page>
    );
};

export default AdjustmentsBatchFilters;