import { classNames, optionClassNames, Size, FillMode } from '../misc';
import { Popup } from '../popup';

import { KendoComponent } from '../_types/component';
import { TOOLBAR_FOLDER_NAME, TOOLBAR_MODULE_NAME } from './constants';
export const TOOLBARPOPUP_CLASSNAME = `k-toolbar-popup`;

const states = [];

const options = {
    size: [Size.undefined, Size.small, Size.medium, Size.large],
    fillMode: [FillMode.undefined, FillMode.solid, FillMode.outline, FillMode.flat ]
};

export type KendoToolbarPopupOptions = {
    size?: (typeof options.size)[number] | null;
    fillMode?: (typeof options.fillMode)[number] | null;
};

export type KendoToolbarPopupProps = KendoToolbarPopupOptions & {
    section?: boolean;
};

const defaultOptions = {
};

export const ToolbarPopup: KendoComponent<KendoToolbarPopupProps & React.HTMLAttributes<HTMLElement>> = (
    props: KendoToolbarPopupProps &
    React.HTMLAttributes<HTMLElement>
) => {

    const {
        size,
        fillMode,
        section,
        ...other
    } = props;

    return (
        <Popup
            {...other}
            className={classNames(
                props.className,
                TOOLBARPOPUP_CLASSNAME
            )}>
             {section
                ? <span className={classNames(
                    'k-toolbar-items-list',
                    optionClassNames('k-toolbar-items-list', {
                        size,
                        fillMode
                    })
                )} role="toolbar">{props.children}</span>
                : props.children
            }

        </Popup>
    );
};

ToolbarPopup.states = states;
ToolbarPopup.options = options;
ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
ToolbarPopup.defaultOptions = defaultOptions;
ToolbarPopup.moduleName = TOOLBAR_MODULE_NAME;
ToolbarPopup.folderName = TOOLBAR_FOLDER_NAME;

export default ToolbarPopup;