import React from 'react';
import cx from 'classnames';
import { SelectDropdown, HeaderSelectTrigger } from './components';
import { CLASSNAME as BASE_CLASSNAME } from './constants';
import { t } from './i18n';
import type { SelectOption, HeaderSelectProps } from './types';

const CLASSNAME = 'SuiteHeaderSelect';

/**
 * HeaderSelect allows a header to trigger a select dropdown. It inherits all the functionalities of our Select component.
 *
 * @type molecule
 * @status live
 * @tags selects
 */
export function HeaderSelect<T extends SelectOption = SelectOption>({
    placeholder = t('selectValue'),
    disabled,
    className,
    testId = CLASSNAME,
    defaultValue = undefined,
    components,
    showSelectedSubtitle,
    ...props
}: HeaderSelectProps<T>) {
    return (
        <SelectDropdown<T, false>
            {...props}
            testId={testId}
            className={cx(BASE_CLASSNAME, CLASSNAME, className)}
            disabled={disabled}
            defaultValue={defaultValue}
            components={components}
        >
            {({ selectedValue, menuOpen, onKeyDown }) => (
                <HeaderSelectTrigger
                    disabled={disabled}
                    menuOpen={menuOpen}
                    value={selectedValue}
                    placeholder={placeholder}
                    onKeyDown={onKeyDown}
                    components={components}
                    showSelectedSubtitle={showSelectedSubtitle}
                />
            )}
        </SelectDropdown>
    );
}