import React from 'react';
import { Page } from '@theorchard/suite-frontend';
import { AccountContractsSelect } from 'src/components/account-ledger/account-contracts-select';
import { AccountLedgerEventsSelect } from 'src/components/account-ledger/account-ledger-events-select';
import { StatementPeriodMultiSelect } from 'src/components/shared/statement-period-multiselect';
import type { AbacusContractList } from 'src/types/abacus-contract';
import type { AccountLedgerFilter } from 'src/types/account-ledger';

export interface AccountLedgerFiltersPropTypes {
    accountContracts: Partial<AbacusContractList>[] | [];
    changeHandler: (fieldName: string, value: string) => void;
    requestParams: AccountLedgerFilter;
}

export const AccountLedgerFilters: React.FC<AccountLedgerFiltersPropTypes> = ({
    accountContracts,
    changeHandler,
    requestParams,
}) => {
    return (
        <Page.Toolbar>
            <div className="ContractFilter">
                <AccountContractsSelect
                    accountContracts={accountContracts}
                    compact={true}
                    onChange={(e: any) =>
                        changeHandler(
                            'contractIds',
                            e && e.map(({ value }: any) => value)
                        )
                    }
                    menuMaxWidth={400}
                    truncatedTextMaxWidth={300}
                    value={requestParams?.contractIds || []}
                />
            </div>
            <div className="EventFilter">
                <AccountLedgerEventsSelect
                    compact={true}
                    onChange={(e: any) =>
                        changeHandler(
                            'eventNames',
                            e && e.map(({ value }: any) => value)
                        )
                    }
                    menuMaxWidth={400}
                    value={requestParams?.eventNames || []}
                />
            </div>
            <div className="StatementPeriodFilter">
                <StatementPeriodMultiSelect
                    compact={true}
                    onChange={(e: any) =>
                        changeHandler(
                            'statementPeriodIds',
                            e && e.map(({ value }: any) => value)
                        )
                    }
                    menuMaxWidth={400}
                    value={requestParams?.statementPeriodIds || []}
                />
            </div>
        </Page.Toolbar>
    );
};

export default AccountLedgerFilters;