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 { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
import { ToolbarSeparator, ToolbarItem } from "../../toolbar";

export const ImageEditorCrop = (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="Crop Image" cols={2} gutters={{cols: "8px"}}>
                    <FormField
                        colSpan="2"
                        label="Aspect Ratio:"
                        editor={ <DropdownList value="Original ratio" aria-label="Aspect ratio" /> }
                    />
                    <FormField
                        colSpan="2"
                        label="Orientation:"
                        editor={
                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched>
                                <SegmentedControlButton selected>Portrait</SegmentedControlButton>
                                <SegmentedControlButton>Landscape</SegmentedControlButton>
                            </SegmentedControl>
                        }
                    />
                    <FormField
                        colSpan="1"
                        label="Width:"
                        editorId="crop-width"
                        editor={ <NumericTextbox id="crop-width" showClearButton={false} value="61" /> }
                    />
                    <FormField
                        colSpan="1"
                        label="Height:"
                        editorId="crop-height"
                        editor={ <NumericTextbox id="crop-height" showClearButton={false} value="68" /> }
                    />
                   <FormField
                        colSpan="2"
                        editor={ <CheckboxWithLabelAfter id="crop-lock">Lock aspect ratio</CheckboxWithLabelAfter> }
                    />
                </Fieldset>
            </FormNormal>
        }

        children={
            <>
                <canvas width="61" height="68" role="img" aria-label="Image being edited"></canvas>
                <div className="k-imageeditor-crop-overlay">
                    <div className="k-imageeditor-crop" style={{ width: "61px", height: "68px" }}>
                        <span className="k-resize-handle k-resize-nw"></span>
                        <span className="k-resize-handle k-resize-n"></span>
                        <span className="k-resize-handle k-resize-ne"></span>
                        <span className="k-resize-handle k-resize-w"></span>
                        <span className="k-resize-handle k-resize-e"></span>
                        <span className="k-resize-handle k-resize-sw"></span>
                        <span className="k-resize-handle k-resize-s"></span>
                        <span className="k-resize-handle k-resize-se"></span>
                    </div>
                </div>
            </>
        }
        {...props} />
);