import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { MainViewModal } from '../views/MainViewModal';
import { SnappingManager } from './SnappingManager';

@observer
export class RTFMarkup extends React.Component<object> {
    // eslint-disable-next-line no-use-before-define
    static Instance: RTFMarkup;
    @observable private isOpen = false; // whether the SharingManager modal is open or not

    public setOpen = action((status: boolean) => {
        this.isOpen = status;
    });

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

    /**
     * @returns the main interface of the SharingManager.
     */
    @computed get cheatSheet() {
        return (
            <div style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor, textAlign: 'initial', height: '100%' }}>
                <p>
                    <b style={{ fontSize: 'larger' }}>(( any text ))</b>
                    {` submit text to Chat GPT to have results appended afterward`}
                </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' }}>{`>> `}</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' }}>@(wiki:phrase)</b>
                    {` display wikipedia page for entered text (terminate with carriage return)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`@(doctitle) `}</b>
                    {`  hyperlink to document specified by it’s title`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@(doctitle.)fieldname] `}</b>
                    {`  display value of fieldname of text document (unless (doctitle.) is used to indicate another document by it's title)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@fieldname:value] `}</b>
                    {`  assign value to fieldname to data document and display it (if '=' is used instead of ':' the value is set on the layout Doc.  if value is wrapped in (()) then it will be sent to ChatGPT and the response will replace the value)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@fieldname:=expression] `}</b>
                    {`  assign a computed expression to fieldname to data document and display it (if '=:=' is used instead of ':=' the expression is set on the layout Doc.  if value is wrapped in (()) then it will be sent to ChatGPT and the prompt/response will replace the value)`}
                </p>
            </div>
        );
    }

    render() {
        return (
            <MainViewModal
                dialogueBoxStyle={{ backgroundColor: SnappingManager.userBackgroundColor, alignContent: 'normal', color: SnappingManager.userColor, padding: '16px' }}
                contents={this.cheatSheet}
                isDisplayed={this.isOpen}
                interactive
                closeOnExternalClick={() => this.setOpen(false)}
            />
        );
    }
}