import { 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"

@observer
export class DashboardView extends React.Component {

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

      newDashboard = async () => {
            const batch = UndoManager.StartBatch("new dash");
            await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
            batch.end();
      }

      clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
            if (e.detail === 2) {
                  Doc.UserDoc().activeDashboard = dashboard
            }
      }

      render() {
            const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
            return <div className="dashboard-view">
                  <div className="left-menu">
                        <div onClick={this.newDashboard}>New</div>
                        <div>All Dashboards</div>
                  </div>
                  <div className="all-dashboards">
                        {myDashboards.map((dashboard) => {
                              const url = ImageCast((dashboard.thumb as Doc)?.data)?.url;
                              const ext = url ? extname(url.href):"";
                              const href = url?.href.replace(ext, "_m"+ ext); // need to choose which resolution image to show.  options are _s, _m, _l, _o   (small/medium/large/original)
                              return <div className="dashboard-container" key={dashboard[Id]} 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="title"> {StrCast(dashboard.title)} </div>
                              </div>

                        })}
                        {myDashboards.map((dashboard) => {
                              console.log(dashboard.thumb)
                        })}

                  </div>
            </div>
      }
}