import { action, observable } from 'mobx';
import { observer } from "mobx-react";
import { EditorView } from 'prosemirror-view';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
import { DocUtils } from '../../documents/Documents';
import { CurrentUserUtils } from '../../util/CurrentUserUtils';
import { Transform } from '../../util/Transform';
import { undoBatch } from '../../util/UndoManager';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { SearchBox } from '../search/SearchBox';
import { DefaultStyleProvider } from '../StyleProvider';
import './LinkPopup.scss';
import React = require("react");

interface LinkPopupProps {
    showPopup: boolean;
    // groupType: string;
    // linkDoc: Doc;
    // docView: DocumentView;
    // sourceDoc: Doc;
}

/**
 * Popup component for creating links from text to Dash documents 
 */

@observer
export class LinkPopup extends React.Component<LinkPopupProps> {
    @observable private linkURL: string = "";
    @observable public view?: EditorView;



    // TODO: should check for valid URL
    @undoBatch
    makeLinkToURL = (target: string, lcoation: string) => {
        ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
    }

    @action
    onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.linkURL = e.target.value;
    }


    getPWidth = () => 500;
    getPHeight = () => 500;

    render() {
        const popupVisibility = this.props.showPopup ? "block" : "none";
        return (
            <div className="linkPopup-container" style={{ display: popupVisibility }}>
                <div className="linkPopup-url-container">
                    <input autoComplete="off" type="text" value={this.linkURL} placeholder="Enter URL..." onChange={this.onLinkChange} />
                    <button onPointerDown={e => this.makeLinkToURL(this.linkURL, "add:right")}
                        style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
                </div>
                <div className="divider">
                    <div className="line"></div>
                    <p className="divider-text">or</p>
                </div>
                <div className="linkPopup-document-search-container">
                    {/* <i></i>
                    <input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
                        className="linkPopup-searchBox searchBox-input" /> */}

                    <SearchBox 
                        Document={CurrentUserUtils.MySearchPanelDoc}
                        DataDoc={CurrentUserUtils.MySearchPanelDoc}
                        fieldKey="data"
                        dropAction="move"
                        isSelected={returnTrue}
                        isContentActive={returnTrue}
                        select={returnTrue}
                        setHeight={returnFalse}
                        addDocument={undefined}
                        addDocTab={returnTrue}
                        pinToPres={emptyFunction}
                        rootSelected={returnTrue}
                        styleProvider={DefaultStyleProvider}
                        layerProvider={undefined}
                        removeDocument={undefined}
                        ScreenToLocalTransform={Transform.Identity}
                        PanelWidth={this.getPWidth}
                        PanelHeight={this.getPHeight}
                        renderDepth={0}
                        focus={DocUtils.DefaultFocus}
                        docViewPath={returnEmptyDoclist}
                        whenChildContentsActiveChanged={emptyFunction}
                        bringToFront={emptyFunction}
                        docFilters={returnEmptyFilter}
                        docRangeFilters={returnEmptyFilter}
                        searchFilterDocs={returnEmptyDoclist}
                        ContainingCollectionView={undefined}
                        ContainingCollectionDoc={undefined} />
                </div>
            </div>
        );
    }
}