import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { ColorState } from 'react-color';
import { Doc, Opt } from '../../../../fields/Doc';
import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../../Utils';
import { SelectionManager } from '../../../util/SelectionManager';
import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
import { LinkPopup } from '../../linking/LinkPopup';
import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
import { EditorView } from 'prosemirror-view';
import './MapAnchorMenu.scss';
import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
import { StrCast } from '../../../../fields/Types';
import { DocumentType } from '../../../documents/DocumentTypes';
import { SettingsManager } from '../../../util/SettingsManager';

@observer
export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
    static Instance: MapAnchorMenu;

    private _disposer: IReactionDisposer | undefined;
    private _disposer2: IReactionDisposer | undefined;
    private _commentCont = React.createRef<HTMLButtonElement>();

    public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search

    public Center: () => void = unimplementedFunction;
    // public OnClick: (e: PointerEvent) => void = unimplementedFunction;
    // public OnAudio: (e: PointerEvent) => void = unimplementedFunction;
    // public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
    // public StartCropDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
    public Highlight: (color: string, isTargetToggler: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => Opt<Doc> = (color: string, isTargetToggler: boolean) => undefined;
    public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => undefined;
    public Delete: () => void = unimplementedFunction;
    public LinkNote: () => void = unimplementedFunction;
    // public MakeTargetToggle: () => void = unimplementedFunction;
    // public ShowTargetTrail: () => void = unimplementedFunction;
    public IsTargetToggler: () => boolean = returnFalse;
    public get Active() {
        return this._left > 0;
    }

    constructor(props: Readonly<{}>) {
        super(props);

        MapAnchorMenu.Instance = this;
        MapAnchorMenu.Instance._canFade = false;
    }

    componentWillUnmount() {
        this._disposer?.();
        this._disposer2?.();
    }

    componentDidMount() {
        this._disposer2 = reaction(
            () => this._opacity,
            opacity => {
                if (!opacity) {
                }
            },
            { fireImmediately: true }
        );
        this._disposer = reaction(
            () => SelectionManager.Views().slice(),
            selected => {
                MapAnchorMenu.Instance.fadeOut(true);
            }
        );
    }
    // audioDown = (e: React.PointerEvent) => {
    //     setupMoveUpEvents(this, e, returnFalse, returnFalse, e => this.OnAudio?.(e));
    // };

    // cropDown = (e: React.PointerEvent) => {
    //     setupMoveUpEvents(
    //         this,
    //         e,
    //         (e: PointerEvent) => {
    //             this.StartCropDrag(e, this._commentCont.current!);
    //             return true;
    //         },
    //         returnFalse,
    //         e => this.OnCrop?.(e)
    //     );
    // };

    static top = React.createRef<HTMLDivElement>();
    // public get Top(){
    //     return this.top
    // }

    render() {
        const buttons = (
            <>
                {
                    <IconButton
                        tooltip="Delete Pin" //
                        onPointerDown={this.Delete}
                        icon={<FontAwesomeIcon icon="trash-alt" />}
                        color={SettingsManager.userColor}
                    />
                }
                {
                    <IconButton
                        tooltip="Link Note to Pin" //
                        onPointerDown={this.LinkNote}
                        icon={<FontAwesomeIcon icon="sticky-note" />}
                        color={SettingsManager.userColor}
                    />
                }
                {
                    <IconButton
                        tooltip="Center on pin" //
                        onPointerDown={this.Center}
                        icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
                        color={SettingsManager.userColor}
                    />
                }
                {/* {this.IsTargetToggler !== returnFalse && (
                        <Toggle
                            tooltip={'Make target visibility toggle on click'}
                            type={Type.PRIM}
                            toggleType={ToggleType.BUTTON}
                            toggleStatus={this.IsTargetToggler()}
                            onClick={this.MakeTargetToggle}
                            icon={<FontAwesomeIcon icon="thumbtack" />}
                            color={SettingsManager.userColor}
                        />
                    )} */}
            </>
        );

        return this.getElement(
            <div ref={MapAnchorMenu.top} style={{ width: '100%', display: 'flex' }}>
                {buttons}
            </div>
        );
    }
}