import React from 'react';
import { MultiSelect, Status } from '@theorchard/suite-components';
import { CONTRACT_STATUS } from 'src/apollo/type-constants/contract';
import type {
    ListViewItem,
    ListViewOptions,
    StatusProps,
} from '@theorchard/suite-components';

const SEARCH_PLACEHOLDER = 'Contract Status';

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

export const ContractStatusMultiSelect: React.FC<
    ContractStatusMultiSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    menuMaxWidth,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    value,
}) => {
    const sortedStatusMap = new Map(
        [...CONTRACT_STATUS.entries()].sort(([, a], [, b]) =>
            a.label.localeCompare(b.label)
        )
    );

    const contractStatusesOptions = Array.from(sortedStatusMap.entries()).map(
        ([key, value]) => ({
            label: value.label,
            value: key,
        })
    ) as ListViewOptions<ListViewItem>;

    const formattedContractStatuses: {
        [x: string]: {
            filled: StatusProps['filled'];
            variant: StatusProps['variant'];
        };
    } = {};
    Array.from(sortedStatusMap.entries()).forEach(([key, value]) => {
        formattedContractStatuses[key as string] = {
            filled: value.filled as StatusProps['filled'],
            variant: value.variant as StatusProps['variant'],
        };
    });

    return (
        <MultiSelect
            className={`SelectContractStatus ${className}`}
            disabled={isDisabled}
            id="contractStatus"
            menuMaxWidth={menuMaxWidth}
            onChange={onChange}
            options={contractStatusesOptions}
            placeholder={placeholder}
            requireApply
            selectedValue={value}
            testId="contractStatus"
            components={{
                OptionLabel: ({ option }) => (
                    <Status
                        data-testid="contract-status"
                        filled={formattedContractStatuses[option.value].filled}
                        size="medium"
                        text={option.label || ''}
                        variant={
                            formattedContractStatuses[option.value].variant
                        }
                    />
                ),
            }}
            compact={compact}
        />
    );
};

export default ContractStatusMultiSelect;