import { ImageEditor } from "..";
import { Button } from "../../button";
import { CheckboxWithLabelAfter } from "../../checkbox";
import { DropdownList } from "../../dropdownlist";
import { FormNormal, Fieldset, FormField } from "../../form";
import { NumericTextbox } from "../../numerictextbox";
import { ToolbarSeparator, ToolbarItem } from "../../toolbar";

export const ImageEditorResize = (props: any) => (
    <ImageEditor
        toolbarItems={[
            <Button key="toolbar-button-1" icon="upload" aria-label="Upload"></Button>,
            <Button key="toolbar-button-2" 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" icon="crop" aria-label="Crop"></Button>,
            <Button key="toolbar-button-6" icon="image-resize" aria-label="Resize"></Button>,
            <Button key="toolbar-button-7" icon="zoom-in" aria-label="Zoom in"></Button>,
            <Button key="toolbar-button-8" icon="zoom-out" aria-label="Zoom out"></Button>,
            <ToolbarItem key="toolbar-item-1">
                <DropdownList value="Zoom options" aria-label="Zoom options" />
            </ToolbarItem>
        ]}
        actionPane={
            <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                <>
                    <Button themeColor="primary" icon="check">Confirm</Button>
                    <Button icon="cancel">Cancel</Button>
                </>
            }>
                <Fieldset layout="grid" legend="Resize Image" cols={2} gutters={{cols: "8px"}}>
                    <FormField
                        colSpan="1"
                        label="Width:"
                        editorId="resize-width"
                        editor={ <NumericTextbox id="resize-width" showClearButton={false} value="61" /> }
                    />
                    <FormField
                        colSpan="1"
                        label="&nbsp;"
                        editor={ <DropdownList value="Pixels" aria-label="Width unit" /> }
                    />
                    <FormField
                        colSpan="1"
                        label="Height:"
                        editorId="resize-height"
                        editor={ <NumericTextbox id="resize-height" showClearButton={false} value="68" /> }
                    />
                    <FormField
                        colSpan="1"
                        label="&nbsp;"
                        editor={ <DropdownList value="Pixels" aria-label="Height unit" /> }
                    />
                    <FormField
                        colSpan="2"
                        editor={ <CheckboxWithLabelAfter id="resize-lock">Lock aspect ratio</CheckboxWithLabelAfter> }
                    />
                </Fieldset>
            </FormNormal>
        }

        children={
            <canvas width="61" height="68" role="img" aria-label="Image being edited"></canvas>
        }
        {...props} />
);