import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { flexibleCompare } from '@fullcalendar/core/internal';
import { Slider, Switch } from '@mui/material';
import { Button, IconButton } from 'browndash-components';
import { data } from 'jquery';
import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { AiOutlineSend } from 'react-icons/ai';
import ReactLoading from 'react-loading';
import { returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
import { ActiveInkWidth, Doc, StrListCast } from '../../../fields/Doc';
import { DocData } from '../../../fields/DocSymbols';
import { InkData, InkField } from '../../../fields/InkField';
import { BoolCast, DocCast } from '../../../fields/Types';
import { emptyFunction } from '../../../Utils';
import { Docs } from '../../documents/Documents';
import { CollectionViewType } from '../../documents/DocumentTypes';
import { DragManager } from '../../util/DragManager';
import { convertDropDataToButtons, makeUserTemplateButton } from '../../util/DropConverter';
import { SettingsManager } from '../../util/SettingsManager';
import { Transform } from '../../util/Transform';
import { MarqueeOptionsMenu, MarqueeView } from '../collections/collectionFreeForm';
import { CollectionGridView } from '../collections/collectionGrid';
import { CollectionStackingView } from '../collections/CollectionStackingView';
import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
import { FieldViewProps } from '../nodes/FieldView';
import { ObservableReactComponent } from '../ObservableReactComponent';
import { DefaultStyleProvider } from '../StyleProvider';
import './AnnotationPalette.scss';
import { SmartDrawHandler } from './SmartDrawHandler';

@observer
export class AnnotationPalette extends ObservableReactComponent<{}> {
    static Instance: AnnotationPalette;
    @observable private _savedDrawings: Doc[] = [];
    // @observable private _marqueeViewRef = React.createRef<MarqueeView>();
    @observable private _display: boolean = false;
    @observable private _paletteMode: 'create' | 'view' = 'view';
    @observable private _userInput: string = '';
    @observable private _showDrawing: boolean = false;
    @observable private _drawing: Doc | undefined = undefined;
    @observable private _isLoading: boolean = false;
    @observable private _detail: number = 5;
    @observable private _size: number = 350;
    @observable private _canInteract: boolean = true;

    constructor(props: any) {
        super(props);
        makeObservable(this);
        AnnotationPalette.Instance = this;
    }

    return170 = () => 170;

    @action
    setPaletteMode = (mode: 'create' | 'view') => {
        this._paletteMode = mode;
    };

    @action
    setUserInput = (input: string) => {
        this._userInput = input;
    };

    @action
    setDetail = (detail: number) => {
        this._detail = detail;
    };

    @action
    setSize = (size: number) => {
        this._size = size;
    };

    saveAnno = async (docView: DocumentView | undefined, doc: Doc) => {
        const dragData = new DragManager.DocumentDragData([doc]);
        // convertDropDataToButtons(dragData);
        const clone = await Doc.MakeClone(doc);
        clone.clone.title = doc.title;
        const templateBtn = makeUserTemplateButton(clone.clone);

        // const cloneData: Doc = DocCast(clone.clone[DocData]);
        // cloneData.dragFactory = doc;
        Doc.AddDocToList(Doc.MyAnnos, 'data', templateBtn);
        // const collection = this._marqueeViewRef.current?.collection(undefined, false, this._savedDrawings);
        // if (docView) docView.ComponentView?.removeDocument?.(doc);
    };

    @action
    displayPalette = (display: boolean) => {
        this._display = display;
    };

    @action
    generateDrawing = async () => {
        this._isLoading = true;
        try {
            const drawingRes = await SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput);
            const opts = drawingRes?.lastInput;
            const drawing: Doc[] = [];
            drawingRes?.data.forEach((stroke: [InkData, string, string]) => {
                const bounds = InkField.getBounds(stroke[0]);
                // const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height);
                const inkWidth = ActiveInkWidth();
                const inkDoc = Docs.Create.InkDocument(
                    stroke[0],
                    { title: 'stroke',
                    // x: B.x - inkWidth / 2,
                    // y: B.y - inkWidth / 2,
                    // _width: B.width + inkWidth,
                    // _height: B.height + inkWidth,
                    stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore
                    inkWidth,
                    stroke[1],
                    undefined,
                    stroke[2] === 'none' ? undefined : stroke[2]
                );
                drawing.push(inkDoc);
            });
            const collection = MarqueeOptionsMenu.Instance.createCollection(undefined, true, drawing);
            if (collection) {
                const docData = collection[DocData];
                docData.title = opts?.text;
                docData.drawingInput = opts?.text;
                docData.drawingComplexity = opts?.complexity;
                docData.drawingColored = opts?.autoColor;
                docData.drawingSize = opts?.size;
                docData.drawingData = drawingRes?.lastRes;
                this._drawing = collection;
            }
            this._showDrawing = true;
        } catch (e) {
            console.log('Error generating drawing');
        }
        this._isLoading = false;
    };

    // @computed get drawingCreator() {
    //     return (
    //         MarqueeOptionsMenu.Instance.createCollection(undefined, true, this._drawing);
    //     );
    // }
    // return Docs.Create.FreeformDocument([], {});
    // Docs.Create.
    // return (
    //     <DocumentView
    //         Document={doc}
    //         addDocument={undefined}
    //         addDocTab={DocumentViewInternal.addDocTabFunc}
    //         pinToPres={DocumentView.PinDoc}
    //         containerViewPath={returnEmptyDoclist}
    //         styleProvider={DefaultStyleProvider}
    //         removeDocument={returnFalse}
    //         ScreenToLocalTransform={Transform.Identity}
    //         PanelWidth={this.return170}
    //         PanelHeight={this.return170}
    //         renderDepth={0}
    //         isContentActive={returnTrue}
    //         focus={emptyFunction}
    //         whenChildContentsActiveChanged={emptyFunction}
    //         childFilters={returnEmptyFilter}
    //         childFiltersByRanges={returnEmptyFilter}
    //         searchFilterDocs={returnEmptyDoclist}
    //     />
    // );

    render() {
        return !this._display ? null : (
            <div className="annotation-palette" style={{ zIndex: 1000 }}>
                {this._paletteMode === 'view' && (
                    <>
                        <DocumentView
                            Document={Doc.MyAnnos}
                            addDocument={undefined}
                            addDocTab={DocumentViewInternal.addDocTabFunc}
                            pinToPres={DocumentView.PinDoc}
                            containerViewPath={returnEmptyDoclist}
                            styleProvider={DefaultStyleProvider}
                            removeDocument={returnFalse}
                            ScreenToLocalTransform={Transform.Identity}
                            PanelWidth={this.return170}
                            PanelHeight={this.return170}
                            renderDepth={0}
                            isContentActive={returnTrue}
                            focus={emptyFunction}
                            whenChildContentsActiveChanged={emptyFunction}
                            childFilters={returnEmptyFilter}
                            childFiltersByRanges={returnEmptyFilter}
                            searchFilterDocs={returnEmptyDoclist}
                        />
                        <Button
                            // style={{ alignSelf: 'center' }}
                            text="Add"
                            icon={<FontAwesomeIcon icon="square-plus" />}
                            // iconPlacement=""
                            color={SettingsManager.userColor}
                            onClick={() => this.setPaletteMode('create')}
                        />
                    </>
                )}
                {this._paletteMode === 'create' && (
                    <>
                        <div style={{ display: 'flex', flexDirection: 'row', width: '170px' }}>
                            {/* <IconButton
                                tooltip="Advanced Options"
                                icon={<FontAwesomeIcon icon="caret-right" />}
                                color={SettingsManager.userColor}
                                style={{ width: '14px' }}
                                // onClick={() => {
                                //     this._showOptions = !this._showOptions;
                                // }}
                            /> */}
                            <input
                                aria-label="label-input"
                                id="new-label"
                                type="text"
                                style={{ color: 'black', width: '170px' }}
                                value={this._userInput}
                                onChange={e => {
                                    this.setUserInput(e.target.value);
                                }}
                                placeholder="Enter item to draw"
                                // onKeyDown={this.handleKeyPress}
                            />
                            <Button
                                style={{ alignSelf: 'flex-end' }}
                                // text="Send"
                                icon={this._isLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                                iconPlacement="right"
                                color={SettingsManager.userColor}
                                onClick={this.generateDrawing}
                            />
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '170px', marginTop: '5px' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '40px' }}>
                                Color
                                <Switch
                                    sx={{
                                        '& .MuiSwitch-switchBase.Mui-checked': {
                                            color: SettingsManager.userColor,
                                        },
                                        '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
                                            backgroundColor: SettingsManager.userVariantColor,
                                        },
                                    }}
                                    defaultChecked={true}
                                    size="small"
                                    // onChange={this.setAutoColor}
                                />
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '60px' }}>
                                Detail
                                <Slider
                                    sx={{
                                        '& .MuiSlider-thumb': {
                                            color: SettingsManager.userColor,
                                            '&.Mui-focusVisible, &:hover, &.Mui-active': {
                                                boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10`,
                                            },
                                        },
                                        '& .MuiSlider-track': {
                                            color: SettingsManager.userVariantColor,
                                        },
                                        '& .MuiSlider-rail': {
                                            color: SettingsManager.userColor,
                                        },
                                    }}
                                    style={{ width: '80%' }}
                                    min={1}
                                    max={10}
                                    step={1}
                                    size="small"
                                    value={this._detail}
                                    onChange={(e, val) => {
                                        this.setDetail(val as number);
                                    }}
                                    valueLabelDisplay="auto"
                                />
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '60px' }}>
                                Size
                                <Slider
                                    sx={{
                                        '& .MuiSlider-thumb': {
                                            color: SettingsManager.userColor,
                                            '&.Mui-focusVisible, &:hover, &.Mui-active': {
                                                boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20`,
                                            },
                                        },
                                        '& .MuiSlider-track': {
                                            color: SettingsManager.userVariantColor,
                                        },
                                        '& .MuiSlider-rail': {
                                            color: SettingsManager.userColor,
                                        },
                                    }}
                                    style={{ width: '80%' }}
                                    min={50}
                                    max={700}
                                    step={10}
                                    size="small"
                                    value={this._size}
                                    onChange={(e, val) => {
                                        this.setSize(val as number);
                                    }}
                                    valueLabelDisplay="auto"
                                />
                            </div>
                        </div>
                        {this._drawing !== undefined && (
                            <DocumentView
                                Document={this._drawing}
                                addDocument={undefined}
                                addDocTab={DocumentViewInternal.addDocTabFunc}
                                pinToPres={DocumentView.PinDoc}
                                containerViewPath={returnEmptyDoclist}
                                styleProvider={DefaultStyleProvider}
                                removeDocument={returnFalse}
                                ScreenToLocalTransform={Transform.Identity}
                                PanelWidth={this.return170}
                                PanelHeight={this.return170}
                                renderDepth={0}
                                isContentActive={returnTrue}
                                focus={emptyFunction}
                                whenChildContentsActiveChanged={emptyFunction}
                                childFilters={returnEmptyFilter}
                                childFiltersByRanges={returnEmptyFilter}
                                searchFilterDocs={returnEmptyDoclist}
                            />
                        )}
                    </>
                )}
            </div>
        );
    }
}