import { action, computed, observable } from "mobx";
import { extname } from 'path';
import { observer } from "mobx-react";
import * as React from 'react';
import { Doc, DocListCast } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { Cast, ImageCast, StrCast } from "../../fields/Types";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { UndoManager } from "../util/UndoManager";
import "./DashboardView.scss"
import { MainViewModal } from "./MainViewModal";
import { ContextMenu } from "./ContextMenu";
import { DocumentManager } from "../util/DocumentManager";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ContextMenuProps } from "./ContextMenuItem";
import { simulateMouseClick } from "../../Utils";
import { SharingManager } from "../util/SharingManager";
import { CollectionViewType } from "./collections/CollectionView";

enum DashboardGroup {
      MyDashboards, SharedDashboards
}

// DashboardView is the view with the dashboard previews, rendered when the app first loads

@observer
export class DashboardView extends React.Component {

      //TODO: delete dashboard, share dashboard, etc.

      @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;

      @observable private newDashboardName: string | undefined = undefined;
      @action abortCreateNewDashboard = () => { this.newDashboardName = undefined }
      @action setNewDashboardName(name: string) { this.newDashboardName = name }

      @action
      selectDashboardGroup = (group: DashboardGroup) => {
            this.selectedDashboardGroup = group
      }

      clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
            if (e.detail === 2) {
                  Doc.AddDocToList(CurrentUserUtils.MySharedDocs, "viewed", dashboard)
                  CurrentUserUtils.ActiveDashboard = dashboard;
                  CurrentUserUtils.ActivePage = "dashboard";
            }
      }

      getDashboards = () => {
            const allDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
            if (this.selectedDashboardGroup === DashboardGroup.MyDashboards) {
                  return allDashboards.filter((dashboard) => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail)
            } else {
                  const sharedDashboards = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking);
                  return sharedDashboards
            }
      }

      isUnviewedSharedDashboard = (dashboard: Doc): boolean => {
            // const sharedDashboards = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking);
            return !DocListCast(CurrentUserUtils.MySharedDocs.viewed).includes(dashboard)
      }

      getSharedDashboards = () => {
            const sharedDashs = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking);
            return sharedDashs.filter((dashboard) => !DocListCast(CurrentUserUtils.MySharedDocs.viewed).includes(dashboard))
      }

      createNewDashboard = async (name: string) => {
            const batch = UndoManager.StartBatch("new dash");
            await CurrentUserUtils.createNewDashboard(Doc.UserDoc(), undefined, name);
            batch.end();
            this.abortCreateNewDashboard();
      }

      @computed
      get namingInterface() {
            return <div>
                  <input className="password-inputs" placeholder="Untitled Dashboard" onChange={e => this.setNewDashboardName((e.target as any).value)} />
                  <button className="password-submit" onClick={this.abortCreateNewDashboard}>Cancel</button>
                  <button className="password-submit" onClick={() => { this.createNewDashboard(this.newDashboardName!) }}>Create</button>
            </div>;
      }
      
      _downX: number = 0;
      _downY: number = 0;
      @action
      onContextMenu = (dashboard: Doc, e?: React.MouseEvent, pageX?: number, pageY?: number) => {
          // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
          if (e) {
              e.preventDefault();
              e.stopPropagation();
              e.persist();
  
              if (!navigator.userAgent.includes("Mozilla") && (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3)) {
                  return;
              }
              const cm = ContextMenu.Instance;
             cm.addItem({
                    description: "Share Dashboard", event: async () => {
                        SharingManager.Instance.open(undefined, dashboard)
                    }, icon: "edit"
              });
              cm.addItem({
                    description: "Delete Dashboard", event: async () => {
                          CurrentUserUtils.removeDashboard(dashboard)
                    }, icon: "trash"
              });
              cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
          }
        }
  

      render() {
            return <>
                  <div className="dashboard-view">
                        <div className="left-menu">
                              <div className="text-button" onClick={() => { this.setNewDashboardName("") }}>New</div>
                              <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>My Dashboards</div>
                              <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}>Shared Dashboards</div>
                        </div>
                        <div className="all-dashboards">
                              {this.getDashboards().map((dashboard) => {
                                    const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
                                    return <div className="dashboard-container" key={dashboard[Id]}
                                              onContextMenu={(e) => {this.onContextMenu(dashboard, e)}}  
                                              onClick={e => this.clickDashboard(e, dashboard)}>
                                          <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
                                          <div className="info">
                                                <div className="title"> {StrCast(dashboard.title)} </div>
                                                {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ?
                                                 <div>unviewed</div> : <div></div>
                                                }
                                                <div className="more" onPointerDown={e => {
                                                        this._downX = e.clientX;
                                                        this._downY = e.clientY;
                                                    }} 
                                                    onClick={(e) => {this.onContextMenu(dashboard, e)}}
                                                >
                                                      <FontAwesomeIcon color="black" size="lg" icon="bars" />
                                                </div>
                                          </div>

                                    </div>

                              })}
                            </div>

                  </div>
                  <MainViewModal
                        contents={this.namingInterface}
                        isDisplayed={this.newDashboardName !== undefined}
                        interactive={true}
                        closeOnExternalClick={this.abortCreateNewDashboard}
                        dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
            </>

      }
}

export function AddToList(MySharedDocs: Doc, arg1: string, dash: any) {
      throw new Error("Function not implemented.");
}