import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { EditorView } from 'prosemirror-view';
import * as React from 'react';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
import { Doc } from '../../../fields/Doc';
import { Transform } from '../../util/Transform';
import { undoBatch } from '../../util/UndoManager';
import { DefaultStyleProvider } from '../StyleProvider';
import { OpenWhere, returnEmptyDocViewList } from '../nodes/DocumentView';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { SearchBox } from '../search/SearchBox';
import './LinkPopup.scss';

interface LinkPopupProps {
    linkFrom?: () => Doc | undefined;
    linkCreateAnchor?: () => Doc | undefined;
    linkCreated?: (link: Doc) => void;
    // 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 = undefined;

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

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

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

    render() {
        const linkDoc = this.props.linkFrom ? this.props.linkFrom : undefined;
        return (
            <div className="linkPopup-container">
                {/* <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={Doc.MySearcher}
                        docViewPath={returnEmptyDocViewList}
                        linkFrom={linkDoc}
                        linkCreateAnchor={this.props.linkCreateAnchor}
                        linkSearch={true}
                        linkCreated={this.props.linkCreated}
                        fieldKey="data"
                        isSelected={returnTrue}
                        isContentActive={returnTrue}
                        select={returnTrue}
                        addDocument={undefined}
                        addDocTab={returnTrue}
                        pinToPres={emptyFunction}
                        rootSelected={returnFalse}
                        styleProvider={DefaultStyleProvider}
                        removeDocument={undefined}
                        ScreenToLocalTransform={Transform.Identity}
                        PanelWidth={this.getPWidth}
                        PanelHeight={this.getPHeight}
                        renderDepth={0}
                        focus={emptyFunction}
                        whenChildContentsActiveChanged={emptyFunction}
                        childFilters={returnEmptyFilter}
                        childFiltersByRanges={returnEmptyFilter}
                        searchFilterDocs={returnEmptyDoclist}
                    />
                </div>
            </div>
        );
    }
}