import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { Button, IconButton } from 'browndash-components';
import ReactLoading from 'react-loading';
import { AiOutlineSend } from 'react-icons/ai';
import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
import './ImageLabelHandler.scss';
import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
import { InkingStroke } from '../../InkingStroke';
import { InkData } from '../../../../fields/InkField';

@observer
export class SmartDrawHandler extends ObservableReactComponent<{}> {
    static Instance: SmartDrawHandler;

    @observable private _display: boolean = false;
    @observable private _pageX: number = 0;
    @observable private _pageY: number = 0;
    @observable private _yRelativeToTop: boolean = true;
    @observable private _isLoading: boolean = false;
    @observable private _userInput: string = '';
    @observable public coords: InkData | undefined = undefined;

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

    @action
    setIsLoading = (isLoading: boolean) => {
        this._isLoading = isLoading;
    };

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

    @action
    displaySmartDrawHandler = (x: number, y: number) => {
        this._pageX = x;
        this._pageY = y;
        this._display = true;
    };

    @action
    hideLabelhandler = () => {
        this._display = false;
    };

    @action
    drawWithGPT = async (startPoint: {X: number, Y: number}, input: string) => {
        this.setIsLoading(true);
        try {
            const res = await gptAPICall(input, GPTCallType.DRAW);
            if (!res) {
                console.error('GPT call failed');
                return;
            }
            console.log("GPT response:", res);
            // controlPts: {X: number, Y: number}[] = []
            // code to extract list of coords from the string
            // this.coords = controlPts.map(pt: {X: number, Y: number } => {pt.X + startPoint.X, pt.Y + startPoint.Y});
           

        } catch (err) {
            console.error('GPT call failed');
        }

        this.setIsLoading(false);
        this.setUserInput('');
    };

    render() {
        if (this._display) {
            return (
                <div
                    id="label-handler"
                    className="contextMenu-cont"
                    style={{
                        display: this._display ? '' : 'none',
                        left: this._pageX,
                        ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
                        background: SettingsManager.userBackgroundColor,
                        color: SettingsManager.userColor,
                    }}>
                    <div>
                        <IconButton tooltip={'Cancel'} onPointerDown={this.hideLabelhandler} icon={<FontAwesomeIcon icon="xmark" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
                        <input
                            aria-label="label-input"
                            id="new-label"
                            type="text"
                            style={{ color: 'black' }}
                            value={this._userInput}
                            onChange={e => {
                                this.setUserInput(e.target.value);
                            }}
                            placeholder="Enter item to draw"
                        />
                        <Button
                            style={{ alignSelf: 'flex-end' }}
                            text="Send"
                            icon={this._isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
                            iconPlacement="right"
                            color={MarqueeOptionsMenu.Instance.userColor}
                            onClick={e => {
                                this.drawWithGPT({X: e.clientX, Y: e.clientY}, this._userInput);
                            }}
                        />
                        {/* <IconButton
                            tooltip={'Generate Drawing'}
                            onPointerDown={() => {
                                const input = document.getElementById('new-label') as HTMLInputElement;
                                const newLabel = input.value;
                                // this.addLabel(newLabel);
                                // this._currentLabel = '';
                                input.value = '';
                            }}
                            icon={<FontAwesomeIcon icon="plus" />}
                            color={MarqueeOptionsMenu.Instance.userColor}
                            style={{ width: '19px' }}
                        />
                        <IconButton tooltip={'Group Images'} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} /> */}
                    </div>
                    <div>
                        {/* {this._labelGroups.map(group => {
                            return (
                                <div>
                                    <p>{group}</p>
                                    <IconButton
                                        tooltip={'Remove Label'}
                                        onPointerDown={() => {
                                            this.removeLabel(group);
                                        }}
                                        icon={'x'}
                                        color={MarqueeOptionsMenu.Instance.userColor}
                                        style={{ width: '19px' }}
                                    />
                                </div>
                            );
                        })} */}
                    </div>
                </div>
            );
        } else {
            return <></>;
        }
    }
}