import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, Opt } from '../../../../fields/Doc';
import { returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../../Utils';
import { SelectionManager } from '../../../util/SelectionManager';
import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
import { IconButton } from 'browndash-components';
import { SettingsManager } from '../../../util/SettingsManager';
import './MapAnchorMenu.scss';

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

    private _disposer: IReactionDisposer | undefined;
    private _commentRef = React.createRef<HTMLDivElement>();

    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 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 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?.();
    }

    componentDidMount() {
        this._disposer = reaction(
            () => SelectionManager.Views().slice(),
            sel => 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)
    //     );
    // };
    notePointerDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(
            this,
            e,
            (e: PointerEvent) => {
                this.StartDrag(e, this._commentRef.current!);
                return true;
            },
            returnFalse,
            e => this.OnClick(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}
                    />
                }
                {
                    <div ref={this._commentRef}>
                        <IconButton
                            tooltip="Link Note to Pin" //
                            onPointerDown={this.notePointerDown}
                            icon={<FontAwesomeIcon icon="sticky-note" />}
                            color={SettingsManager.userColor}
                        />
                    </div>
                }
                {
                    <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>
        );
    }
}