import React, { useState } from 'react';
import cx from 'classnames';
import { ListBox } from '../listBox';
import { t } from '../marketSelector/i18n';
import { useMarketProps } from '../marketSelector/useMarketProps';
import type { ListBoxProps } from '../listBox';
import type { ListViewMode } from '../listView';
import type {
    CountryInfo,
    CountryOption,
    CountryQuickSelection,
    CountrySelection,
} from '../marketSelector/types';

const CLASSNAME = 'MarketListBox';

export interface MarketListBoxProps<T extends CountryOption = CountryOption>
    extends Omit<
        ListBoxProps<T, true>,
        | 'quickSelections'
        | 'recentSelections'
        | 'options'
        | 'listMode'
        | 'initialValue'
        | 'selectedValue'
        | 'variant'
        | 'dividers'
    > {
    /**
     * 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[];
}

/**
 * MarketListBox provides an inline list of countries and allows user to select multiple ones from the list.
 *
 * @type molecule
 * @status live
 * @tags tables-lists
 */
export function MarketListBox({
    className,
    quickSelections,
    recentSelections,
    testId = CLASSNAME,
    onListModeChange,
    initialValue: initialCountries,
    selectedValue: selectedCountries,
    defaultListMode = 'consolidated',
    showListModes = true,
    countries,
    filterPlaceholder = t('searchCountry'),
    ...props
}: MarketListBoxProps) {
    const [listMode, setListMode] = useState<ListViewMode>(defaultListMode);
    const {
        initialValue,
        options,
        quickCountrySelections,
        recentCountrySelections,
        selectedValue,
    } = useMarketProps({
        countries,
        initialCountries,
        listMode,
        quickSelections,
        recentSelections,
        selectedCountries,
    });

    return (
        <ListBox
            {...props}
            initialValue={initialValue}
            selectedValue={selectedValue}
            filterPlaceholder={filterPlaceholder}
            className={cx(CLASSNAME, className)}
            testId={testId}
            multi
            options={options}
            quickSelections={quickCountrySelections}
            recentSelections={recentCountrySelections}
            onListModeChange={(mode) => {
                setListMode(mode);
                onListModeChange?.(mode);
            }}
            listMode={listMode}
            showListModes={showListModes}
        />
    );
}