import React from 'react';
import { Highlight, Select } from '@theorchard/suite-components';
import type {
    ListViewItem,
    ListViewOptions,
} from '@theorchard/suite-components';
import { INCLUDED_EXCLUDED_OPTIONS } from 'src/apollo/type-constants/contract';

const SEARCH_PLACEHOLDER = 'Included/Excluded';

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

export const IncludedExcludedSelect: React.FC<
    IncludedExcludedSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    fieldTextMaxWidth,
    menuMaxWidth,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    value,
}) => {
    const includedExcludedOptions = Object.entries(
        INCLUDED_EXCLUDED_OPTIONS
    ).map(([key, value]) => ({
        label: value,
        value: key,
    })) as ListViewOptions<ListViewItem>;

    return (
        <Select
            className={`SelectIncludedOrExcluded ${className}`}
            disabled={isDisabled}
            fieldTextMaxWidth={fieldTextMaxWidth}
            id="includedOrExcluded"
            menuMaxWidth={menuMaxWidth}
            onChange={onChange}
            options={includedExcludedOptions}
            placeholder={placeholder}
            selectedValue={value}
            testId="includedOrExcluded"
            components={{
                OptionLabel: ({ option }) => (
                    <div className="includedOrExcludedText">
                        <Highlight
                            variant={
                                option.label === 'Excluded'
                                    ? 'error'
                                    : 'success'
                            }
                        >
                            {option.label}
                        </Highlight>
                    </div>
                ),
            }}
            compact={compact}
        />
    );
};

export default IncludedExcludedSelect;