import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconButton } from '@dash/components';
import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnFalse } from '../../../../ClientUtils';
import { unimplementedFunction } from '../../../../Utils';
import { Doc, Opt } from '../../../../fields/Doc';
import { NumCast, StrCast } from '../../../../fields/Types';
import { SettingsManager } from '../../../util/SettingsManager';
import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
import { DocumentView } from '../DocumentView';

@observer
export class DirectionsAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
    // eslint-disable-next-line no-use-before-define
    static Instance: DirectionsAnchorMenu;

    private _disposer: IReactionDisposer | undefined;

    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> = () => undefined;
    public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined;
    public Delete: () => void = unimplementedFunction;
    // public MakeTargetToggle: () => void = unimplementedFunction;
    // public ShowTargetTrail: () => void = unimplementedFunction;
    public IsTargetToggler: () => boolean = returnFalse;

    private title: string | undefined = undefined;

    public setPinDoc(pinDoc: Doc) {
        this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
        console.log('Title: ', this.title);
    }

    public get Active() {
        return this._left > 0;
    }

    constructor(props: AntimodeMenuProps) {
        super(props);

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

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

    componentDidMount() {
        this._disposer = reaction(
            () => DocumentView.Selected().slice(),
            () => DirectionsAnchorMenu.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) => {
    //     setupMoveUpEvent(
    //         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 = (
            <div className="directions-menu-buttons" style={{ display: 'flex' }}>
                <IconButton
                    tooltip="Add route" //
                    onPointerDown={this.Delete}
                    icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
                    color={SettingsManager.userColor}
                />

                <IconButton tooltip="Animate route" onPointerDown={this.Delete} /* *TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />
                <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /* *TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
            </div>
        );

        return this.getElement(
            <div ref={DirectionsAnchorMenu.top} style={{ height: 'max-content', width: '100%', display: 'flex', flexDirection: 'column' }}>
                <div>{this.title}</div>
                <div className="direction-inputs" style={{ display: 'flex', flexDirection: 'column' }}>
                    <input placeholder="Origin" />
                    <input placeholder="Destination" />
                </div>
                {buttons}
            </div>
        );
    }
}