import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { MainViewModal } from '../views/MainViewModal';
import { SettingsManager } from './SettingsManager';
import { Doc } from '../../fields/Doc';
import { StrCast } from '../../fields/Types';

@observer
export class RTFMarkup extends React.Component<{}> {
    static Instance: RTFMarkup;
    @observable private isOpen = false; // whether the SharingManager modal is open or not

    // private get linkVisible() {
    //     return this.targetDoc ? this.targetDoc["acl-" + PublicKey] !== SharingPermissions.None : false;
    // }

    @action
    public open = () => (this.isOpen = true);

    @action
    public close = () => (this.isOpen = false);

    constructor(props: {}) {
        super(props);
        RTFMarkup.Instance = this;
    }

    @observable _stats: { [key: string]: any } | undefined;

    /**
     * @returns the main interface of the SharingManager.
     */
    @computed get cheatSheet() {
        return (
            <div style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, textAlign: 'initial', height: '100%' }}>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`wiki:phrase`}</b>
                    {` display wikipedia page for entered text (terminate with carriage return)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`#tag `}</b>
                    {`  add hashtag metadata to document. e.g, #idea`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`#, ## ... ###### `}</b>
                    {`  set heading style based on number of '#'s between 1 and 6`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`#tag `}</b>
                    {`  add hashtag metadata to document. e.g, #idea`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`>> `}</b>
                    {`  add a sidebar text document inline`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`\`\`\` `}</b>
                    {`  create a code snippet block`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-f `}</b>
                    {`  collapse to an inline footnote)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-e `}</b>
                    {`  collapse to elided text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-[ `}</b>
                    {`  left justify text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-\\ `}</b>
                    {`  center text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-] `}</b>
                    {`  right justify text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%% `}</b>
                    {`  restore default styling`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%color `}</b>
                    {`  changes text color styling. e.g., %green.`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%num `}</b>
                    {`  set font size. e.g., %10 for 10pt font`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%eq `}</b>
                    {`  creates an equation block for typeset math`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%/ `}</b>
                    {`  switch between primary and alternate text (see bottom right Button for hover options).`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%> `}</b>
                    {`  create a bockquote section. Terminate with 2 carriage returns`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%q `}</b>
                    {`  start a quoted block of text that’s indented on the left and right. Terminate with %q`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%d `}</b>
                    {`  start a block text where the first line is indented`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%h `}</b>
                    {`  start a block of text that begins with a hanging indent`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[:doctitle]] `}</b>
                    {`  hyperlink to document specified by it’s title`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[[fieldname]] `}</b>
                    {`  display value of fieldname`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[[fieldname=value]] `}</b>
                    {`  assign value to fieldname of document and display it`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[[fieldname:doctitle]] `}</b>
                    {`  show value of fieldname from doc specified by it’s title`}
                </p>
            </div>
        );
    }

    render() {
        return (
            <MainViewModal
                dialogueBoxStyle={{ backgroundColor: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, padding: '16px' }}
                contents={this.cheatSheet}
                isDisplayed={this.isOpen}
                interactive={true}
                closeOnExternalClick={this.close}
            />
        );
    }
}