import React, { useState } from 'react';
import { MultiSelect } from '@theorchard/suite-components';
import sortBy from 'lodash-es/sortBy';

export interface TransactionTypeMultiSelectPropTypes {
    className?: string;
    onChange: (params: any) => void;
    placeholder?: string;
    portalElement?: HTMLElement;
    selectedValue: string[];
    transactionTypes: { label: string; value: string }[];
    transactionTypeGroups: {
        transactionTypeGroupName: string;
        transactionTypeIds: string[];
    }[];
}

type ListViewMode = 'consolidated' | 'sectioned';

export const TransactionTypeMultiSelect: React.FC<
    TransactionTypeMultiSelectPropTypes
> = ({
    className = '',
    onChange,
    placeholder = '',
    portalElement,
    selectedValue = [],
    transactionTypes,
    transactionTypeGroups,
}) => {
    const [listMode, setListMode] = useState<ListViewMode>('consolidated');

    const allTransactionTypeIds = transactionTypes?.map(
        ({ value }: any) => value
    );

    const sortedTransactionTypes = sortBy(transactionTypes, ['label']);

    const allSelectionOption = {
        label: 'All',
        options:
            transactionTypes?.filter(type =>
                allTransactionTypeIds?.includes(type.value)
            ) || [],
    };

    const selectedOptions = sortedTransactionTypes?.filter(({ value }) =>
        Array.isArray(selectedValue)
            ? selectedValue?.includes(value)
            : selectedValue === value
    );

    const quickSelections = transactionTypeGroups.map(group => ({
        label: group.transactionTypeGroupName,
        options:
            transactionTypes?.filter(tt =>
                group.transactionTypeIds.includes(tt.value)
            ) || [],
    }));

    const options =
        listMode === 'consolidated' ? sortedTransactionTypes : quickSelections;

    return (
        <MultiSelect
            className={`SelectTransactionTypes ${className}`}
            listMode={listMode}
            menuMinWidth={470}
            onChange={onChange}
            onListModeChange={mode => setListMode(mode)}
            options={options}
            placeholder={placeholder}
            portalElement={portalElement}
            quickSelections={[allSelectionOption, ...quickSelections]}
            selectedValue={selectedOptions}
            showListModes
            testId="TransactionTypeMultiSelect"
        />
    );
};