import React, { useState } from 'react';
import cx from 'classnames';
import { MultiSelect } from '../select';
import { t } from './i18n';
import { useMarketProps } from './useMarketProps';
import type { CountryInfo, CountryOption, CountryQuickSelection, CountrySelection } from './types';
import type { ListViewMode } from '../listView';
import type { MultiSelectProps } from '../select';

const CLASSNAME = 'SuiteMarketSelector';

export interface MarketSelectorProps<T extends CountryOption = CountryOption>
    extends Omit<
        MultiSelectProps<T>,
        | 'quickSelections'
        | 'recentSelections'
        | 'options'
        | 'listMode'
        | 'initialValue'
        | 'selectedValue'
    > {
    /**
     * A list of presets shown in the "Quick selections" section.
     */
    quickSelections?: CountryQuickSelection[];

    /**
     * A list of combinations shown in the "Recent selections" section.
     */
    recentSelections?: CountrySelection[];

    /**
     * The selected countries on first render.
     */
    initialValue?: string[];

    /**
     * The selected countries.
     * Note when you use this property you are using the component in "controlled" mode.
     * Meaning you need to handle onChange events and manage state yourself.
     */
    selectedValue?: string[];

    /**
     * The default chosen list mode.
     */
    defaultListMode?: ListViewMode;

    /**
     * Custom list of countries to use.
     */
    countries?: CountryInfo[] | string[];
}

/**
 * MarketSelector provides a list of countries and allows user to select multiple ones from the list.
 *
 * @type molecule
 * @status live
 * @tags form-elements, selects
 */
export function MarketSelector({
    placeholder = t('selectCountries'),
    menuMinWidth = 469,
    optionTagMaxWidth = 150,
    menuWidth = 530,
    className,
    quickSelections,
    recentSelections,
    testId = CLASSNAME,
    onListModeChange,
    initialValue: initialCountries,
    selectedValue: selectedCountries,
    defaultListMode = 'consolidated',
    requireApply = true,
    showListModes = true,
    countries,
    filterPlaceholder = t('searchCountry'),
    ...props
}: MarketSelectorProps) {
    const [listMode, setListMode] = useState<ListViewMode>(defaultListMode);
    const {
        initialValue,
        options,
        quickCountrySelections,
        recentCountrySelections,
        selectedValue,
    } = useMarketProps({
        countries,
        initialCountries,
        listMode,
        quickSelections,
        recentSelections,
        selectedCountries,
    });

    return (
        <MultiSelect
            {...props}
            initialValue={initialValue}
            selectedValue={selectedValue}
            placeholder={placeholder}
            filterPlaceholder={filterPlaceholder}
            className={cx(CLASSNAME, className)}
            testId={testId}
            options={options}
            menuMinWidth={menuMinWidth}
            menuWidth={menuWidth}
            optionTagMaxWidth={optionTagMaxWidth}
            quickSelections={quickCountrySelections}
            recentSelections={recentCountrySelections}
            onListModeChange={(mode) => {
                setListMode(mode);
                onListModeChange?.(mode);
            }}
            listMode={listMode}
            showListModes={showListModes}
            requireApply={requireApply}
        />
    );
}