import { KendoToolbarProps, Toolbar, ToolbarItem, ToolbarSeparator } from '../toolbar';
import { classNames } from '../misc';
import { Button } from '../button';
import { DropdownList } from '../dropdownlist';

export const IMAGEEDITORTOOLBAR_CLASSNAME = `k-imageeditor-toolbar`;

const states = [];

const options = {};

export type KendoImageEditorToolbarProps = {
    toolbarItems?: React.JSX.Element | React.JSX.Element[];
};

const defaultToolbarItems = [
    <Button key="toolbar-button-1" icon="upload" aria-label="Upload"></Button>,
    <Button key="toolbar-button-2" disabled icon="download" aria-label="Download"></Button>,
    <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
    <Button key="toolbar-button-3" disabled icon="undo" aria-label="Undo"></Button>,
    <Button key="toolbar-button-4" disabled icon="redo" aria-label="Redo"></Button>,
    <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
    <Button key="toolbar-button-5" disabled icon="crop" aria-label="Crop"></Button>,
    <Button key="toolbar-button-6" disabled icon="image-resize" aria-label="Resize"></Button>,
    <Button key="toolbar-button-7" disabled icon="zoom-in" aria-label="Zoom in"></Button>,
    <Button key="toolbar-button-8" disabled icon="zoom-out" aria-label="Zoom out"></Button>,
    <ToolbarItem key="toolbar-item-1">
        <DropdownList disabled value="Zoom options" aria-label="Zoom options" />
    </ToolbarItem>
];

const defaultOptions = {
    toolbarItems: defaultToolbarItems
};

export const ImageEditorToolbar = (
    props: KendoToolbarProps &
        KendoImageEditorToolbarProps &
        React.HTMLAttributes<HTMLDivElement>
) => {
    const {
        toolbarItems = defaultOptions.toolbarItems,
        ...other
    } = props;

    return (
        <Toolbar
            {...other}
            className={classNames(
                props.className,
                IMAGEEDITORTOOLBAR_CLASSNAME,
            )}
        >
            {toolbarItems}
        </Toolbar>
    );
};

ImageEditorToolbar.states = states;
ImageEditorToolbar.options = options;
ImageEditorToolbar.className = IMAGEEDITORTOOLBAR_CLASSNAME;
ImageEditorToolbar.defaultOptions = defaultOptions;

export default ImageEditorToolbar;