import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
import { documentSchema } from '../../../../fields/documentSchemas';
import { Id } from '../../../../fields/FieldSymbols';
import { makeInterface } from '../../../../fields/Schema';
import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
import { DragManager } from '../../../util/DragManager';
import { Transform } from '../../../util/Transform';
import { Colors, Shadows } from '../../global/globalEnums';
import { AudioBox } from '../../nodes/AudioBox';
import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
import { DocumentView } from '../../nodes/DocumentView';
import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup';
import { StyleProp } from '../../StyleProvider';
import { CollectionSubView } from '../CollectionSubView';
import { CollectionViewType } from '../CollectionView';
import "./CollectionLinearView.scss";


type LinearDocument = makeInterface<[typeof documentSchema,]>;
const LinearDocument = makeInterface(documentSchema);

@observer
export class CollectionLinearView extends CollectionSubView(LinearDocument) {
    @observable public addMenuToggle = React.createRef<HTMLInputElement>();
    @observable private _selectedIndex = -1;
    private _dropDisposer?: DragManager.DragDropDisposer;
    private _widthDisposer?: IReactionDisposer;
    private _selectedDisposer?: IReactionDisposer;

    componentWillUnmount() {
        this._dropDisposer?.();
        this._widthDisposer?.();
        this._selectedDisposer?.();
        this.childLayoutPairs.map((pair, ind) => ScriptCast(pair.layout.proto?.onPointerUp)?.script.run({ this: pair.layout.proto }, console.log));
    }

    componentDidMount() {
        this._widthDisposer = reaction(() => 5 + (this.layoutDoc.linearViewIsExpanded ? this.childDocs.length * (this.rootDoc[HeightSym]()) : 10),
            width => this.childDocs.length && (this.layoutDoc._width = width),
            { fireImmediately: true }
        );

        this._selectedDisposer = reaction(
            () => NumCast(this.layoutDoc.selectedIndex),
            (i) => runInAction(() => {
                this._selectedIndex = i;
                let selected: any = undefined;
                this.childLayoutPairs.map(async (pair, ind) => {
                    const isSelected = this._selectedIndex === ind;
                    if (isSelected) {
                        selected = pair;
                    }
                    else {
                        ScriptCast(pair.layout.proto?.onPointerUp)?.script.run({ this: pair.layout.proto }, console.log);
                    }
                });
                if (selected && selected.layout) {
                    ScriptCast(selected.layout.proto?.onPointerDown)?.script.run({ this: selected.layout.proto }, console.log);
                }
            }),
            { fireImmediately: true }
        );
    }
    protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
        this._dropDisposer && this._dropDisposer();
        if (ele) {
            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
        }
    }

    dimension = () => NumCast(this.rootDoc._height); // 2 * the padding
    getTransform = (ele: Opt<HTMLDivElement>) => {
        if (!ele) return Transform.Identity();
        const { scale, translateX, translateY } = Utils.GetScreenTransform(ele);
        return new Transform(-translateX, -translateY, 1);
    }

    @action
    exitLongLinks = () => {
        if (DocumentLinksButton.StartLink) {
            if (DocumentLinksButton.StartLink.Document) {
                action((e: React.PointerEvent<HTMLDivElement>) => {
                    Doc.UnBrushDoc(DocumentLinksButton.StartLink?.Document as Doc);
                });
            }
        }
        DocumentLinksButton.StartLink = undefined;
        DocumentLinksButton.StartLinkView = undefined;
    }

    @action
    changeDescriptionSetting = () => {
        if (LinkDescriptionPopup.showDescriptions) {
            if (LinkDescriptionPopup.showDescriptions === "ON") {
                LinkDescriptionPopup.showDescriptions = "OFF";
                LinkDescriptionPopup.descriptionPopup = false;
            } else {
                LinkDescriptionPopup.showDescriptions = "ON";
            }
        } else {
            LinkDescriptionPopup.showDescriptions = "OFF";
            LinkDescriptionPopup.descriptionPopup = false;
        }
    }

    myContextMenu = (e: React.MouseEvent) => {
        e.stopPropagation();
        e.preventDefault();
    }


    getDisplayDoc = (doc: Doc) => {
        const nested = doc._viewType === CollectionViewType.Linear;
        const hidden = doc.hidden === true;

        let dref: Opt<HTMLDivElement>;
        const docXf = () => this.getTransform(dref);
        // const scalable = pair.layout.onClick || pair.layout.onDragStart;
        return hidden ? (null) : <div className={`collectionLinearView-docBtn`} key={doc[Id]} ref={r => dref = r || undefined}
            style={{
                pointerEvents: "all",
                width: nested ? undefined : NumCast(doc._width),
                height: nested ? undefined : NumCast(doc._height),
                marginLeft: !nested ? 2.5 : 0,
                marginRight: !nested ? 2.5 : 0,
                // width: NumCast(pair.layout._width),
                // height: NumCast(pair.layout._height),
            }}  >
            <DocumentView
                Document={doc}
                isContentActive={this.props.isContentActive}
                isDocumentActive={returnTrue}
                addDocument={this.props.addDocument}
                moveDocument={this.props.moveDocument}
                addDocTab={this.props.addDocTab}
                pinToPres={emptyFunction}
                rootSelected={this.props.isSelected}
                removeDocument={this.props.removeDocument}
                ScreenToLocalTransform={docXf}
                PanelWidth={nested ? doc[WidthSym] : this.dimension}
                PanelHeight={nested ? doc[HeightSym] : this.dimension}
                renderDepth={this.props.renderDepth + 1}
                focus={emptyFunction}
                styleProvider={this.props.styleProvider}
                layerProvider={this.props.layerProvider}
                docViewPath={returnEmptyDoclist}
                whenChildContentsActiveChanged={emptyFunction}
                bringToFront={emptyFunction}
                docFilters={this.props.docFilters}
                docRangeFilters={this.props.docRangeFilters}
                searchFilterDocs={this.props.searchFilterDocs}
                ContainingCollectionView={undefined}
                ContainingCollectionDoc={undefined} />
        </div>;
    }

    render() {
        const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
        const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
        const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
        const floating: boolean = BoolCast(this.props.Document.linearViewFloating); // Specify whether it is expandable or not

        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
        const menuOpener = <label htmlFor={`${guid}`}
            style={{
                boxShadow: floating ? Shadows.STANDARD_SHADOW : undefined,
                color: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.BLACK,
                backgroundColor: backgroundColor === color ? "black" : BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.LIGHT_GRAY
            }}
            onPointerDown={e => e.stopPropagation()} >
            <div className="collectionLinearView-menuOpener">
                {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={"minus"} /> : icon ? icon : <FontAwesomeIcon icon={"plus"} />}
            </div>
        </label>;

        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{ backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : "transparent" }}>
            <div className="collectionLinearView" ref={this.createDashEventsTarget}
                onContextMenu={this.myContextMenu} >
                {!expandable ? (null) : <Tooltip title={<><div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close" : "Open"}</div></>} placement="top">
                    {menuOpener}
                </Tooltip>}
                <input id={`${guid}`} type="checkbox" checked={BoolCast(this.props.Document.linearViewIsExpanded)} ref={this.addMenuToggle}
                    onChange={action(() => this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked)} />

                <div className="collectionLinearView-content"
                    style={{
                        height: this.dimension(),
                        flexDirection: flexDir,
                        gap: flexGap
                    }}>
                    {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
                </div>
                {DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background" style={{
                    pointerEvents: "all"
                }}
                    onPointerDown={e => e.stopPropagation()} >
                    <span className="bottomPopup-text" >
                        Creating link from: <b>{DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}</b>
                    </span>

                    <Tooltip title={<><div className="dash-tooltip">{"Toggle description pop-up"} </div></>} placement="top">
                        <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
                            Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"}
                        </span>
                    </Tooltip>

                    <Tooltip title={<><div className="dash-tooltip">Exit linking mode</div></>} placement="top">
                        <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
                            Stop
                        </span>
                    </Tooltip>

                </span> : null}
                {/* TODO: add small player for single clip, dropdown sort of expandable menu for multiple clips
                            add onclick show audio similar to follow link behavior
                            add button to close out audio from currently playing */}
                {AudioBox.CurrentlyPlaying && AudioBox.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background">
                    <span className="bottomPopup-text">
                        Currently listening to: {AudioBox.CurrentlyPlaying.map((clip) => clip.dataDoc.title + ", ")}
                    </span>
                </span> : null}
            </div>
        </div>;
    }
}