import React, { useEffect, useState } from 'react';
import { MultiSelect } from '@theorchard/suite-components';
import { LEDGER_EVENT_NAMES_MAPPING } from 'src/apollo/type-constants/account';
import type { ListViewItem } from '@theorchard/suite-components';

const SEARCH_PLACEHOLDER = 'Event';

export interface AccountLedgerEventsSelectPropTypes {
    className?: string;
    compact?: boolean;
    isDisabled?: boolean;
    menuMaxWidth?: number;
    onChange: (e: ListViewItem[] | undefined) => void;
    value?: string[] | [];
}

export const AccountLedgerEventsSelect: React.FC<
    AccountLedgerEventsSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    menuMaxWidth,
    onChange,
    value,
}) => {
    const [ledgerEvents, setLedgerEvents] = useState<ListViewItem[]>([]);

    useEffect(() => {
        const options: ListViewItem[] = [];

        Object.keys(LEDGER_EVENT_NAMES_MAPPING).forEach((key: string) => {
            options.push({
                label: key,
                value: key,
            });
        });
        options.sort((a, b) => a.label!.localeCompare(b.label!));
        setLedgerEvents(options);
    }, []);

    return (
        <MultiSelect
            className={`SelectAccountLedgerEvents ${className}`}
            disabled={isDisabled}
            id="accountLedgerEvents"
            menuMaxWidth={menuMaxWidth}
            onChange={onChange}
            options={ledgerEvents}
            placeholder={SEARCH_PLACEHOLDER}
            requireApply
            selectedValue={value}
            compact={compact}
            portalElement={document.body}
        />
    );
};

export default AccountLedgerEventsSelect;