import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx';
import { observer } from "mobx-react";
import * as request from 'request'
import './WorkspacesMenu.css'
import { Document } from '../../../fields/Document';
import { Server } from '../../../client/Server';
import { Field } from '../../../fields/Field';
import { EditableView } from '../../../client/views/EditableView';
import { KeyStore } from '../../../fields/KeyStore';

export interface WorkspaceMenuProps {
    active: Document;
    open: (workspace: Document) => void;
    new: (init: boolean) => void;
    allWorkspaces: Document[];
}

@observer
export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> {
    static Instance: WorkspacesMenu;
    @observable private workspacesExposed: boolean = false;

    constructor(props: WorkspaceMenuProps) {
        super(props);
        WorkspacesMenu.Instance = this;
        this.addNewWorkspace = this.addNewWorkspace.bind(this);
    }

    @action
    addNewWorkspace() {
        this.props.new(false);
        this.toggle();
    }

    @action
    toggle() {
        this.workspacesExposed = !this.workspacesExposed;
    }

    render() {
        let p = this.props;
        return (
            <div
                style={{
                    width: "auto",
                    height: "auto",
                    borderRadius: 5,
                    position: "absolute",
                    top: 55,
                    left: this.workspacesExposed ? 11 : -500,
                    background: "white",
                    border: "black solid 2px",
                    transition: "all 1s ease",
                    zIndex: 15,
                    padding: 10,
                    paddingRight: 12,
                }}>
                <img
                    src="https://bit.ly/2IBBkxk"
                    style={{
                        width: 20,
                        height: 20,
                        marginTop: 3,
                        marginLeft: 3,
                        marginBottom: 3,
                        cursor: "grab"
                    }}
                    onClick={this.addNewWorkspace}
                />
                {this.props.allWorkspaces.map((s, i) =>
                    <div
                        key={s.Id}
                        onContextMenu={(e) => {
                            e.preventDefault();
                            this.props.open(s);
                        }}
                        style={{
                            marginTop: 10
                        }}
                    >
                        <span>{i + 1} - </span>
                        <EditableView
                            display={"inline"}
                            GetValue={() => { return s.Title }}
                            SetValue={(title: string): boolean => {
                                s.SetText(KeyStore.Title, title);
                                return true;
                            }}
                            contents={s.Title}
                            height={20}
                        />
                    </div>
                )}
            </div>
        );
    }
}