import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ColorState, SketchPicker } from 'react-color';
import { Doc, HeightSym, StrListCast, WidthSym } from '../../../../fields/Doc';
import { InkTool } from '../../../../fields/InkField';
import { ScriptField } from '../../../../fields/ScriptField';
import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
import { WebField } from '../../../../fields/URLField';
import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
import { aggregateBounds, StopEvent, Utils } from '../../../../Utils';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { LinkManager } from '../../../util/LinkManager';
import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
import { SelectionManager } from '../../../util/SelectionManager';
import { undoBatch, UndoManager } from '../../../util/UndoManager';
import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
import { ContextMenu } from '../../ContextMenu';
import { DocComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { GestureOverlay } from '../../GestureOverlay';
import { Colors } from '../../global/globalEnums';
import { ActiveFillColor, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, SetActiveIsInkMask } from '../../InkingStroke';
import { InkTranscription } from '../../InkTranscription';
import { StyleProp } from '../../StyleProvider';
import { FieldView, FieldViewProps } from '.././FieldView';
import { OpenWhere } from '../DocumentView';
import { RichTextMenu } from '../formattedText/RichTextMenu';
import { WebBox } from '../WebBox';
import { FontIconBadge } from './FontIconBadge';
import './FontIconBox.scss';

export enum ButtonType {
    TextButton = 'textBtn',
    MenuButton = 'menuBtn',
    DropdownList = 'drpdownList',
    DropdownButton = 'drpdownBtn',
    ClickButton = 'clickBtn',
    DoubleButton = 'dblBtn',
    ToggleButton = 'tglBtn',
    ColorButton = 'colorBtn',
    ToolButton = 'toolBtn',
    NumberButton = 'numBtn',
    EditableText = 'editableText',
}

export enum NumButtonType {
    Slider = 'slider',
    DropdownOptions = 'list',
    Inline = 'inline',
}

export interface ButtonProps extends FieldViewProps {
    type?: ButtonType;
}
@observer
export class FontIconBox extends DocComponent<ButtonProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(FontIconBox, fieldKey);
    }
    showTemplate = (): void => {
        const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
        dragFactory && this.props.addDocTab(dragFactory, OpenWhere.addRight);
    };
    dragAsTemplate = (): void => {
        this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
    };
    useAsPrototype = (): void => {
        this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)');
    };

    specificContextMenu = (): void => {
        if (!Doc.noviceMode) {
            const cm = ContextMenu.Instance;
            cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' });
            cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' });
            cm.addItem({ description: 'Use as Prototype', event: this.useAsPrototype, icon: 'tag' });
        }
    };

    static GetShowLabels() {
        return BoolCast(Doc.UserDoc()._showLabel);
    }
    static SetShowLabels(show: boolean) {
        Doc.UserDoc()._showLabel = show;
    }
    static GetRecognizeGestures() {
        return BoolCast(Doc.UserDoc()._recognizeGestures);
    }
    static SetRecognizeGestures(show: boolean) {
        Doc.UserDoc()._recognizeGestures = show;
    }

    // Determining UI Specs
    @computed get label() {
        return StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
    }
    Icon = (color: string) => {
        const icon = StrCast(this.dataDoc.icon, 'user') as any;
        const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
        return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
    };
    @computed get dropdown() {
        return BoolCast(this.rootDoc.dropDownOpen);
    }
    @computed get buttonList() {
        return StrListCast(this.rootDoc.btnList);
    }
    @computed get type() {
        return StrCast(this.rootDoc.btnType);
    }

    /**
     * Types of buttons in dash:
     * - Main menu button (LHS)
     * - Tool button
     * - Expandable button (CollectionLinearView)
     * - Button inside of CollectionLinearView vs. outside of CollectionLinearView
     * - Action button
     * - Dropdown button
     * - Color button
     * - Dropdown list
     * - Number button
     **/

    _batch: UndoManager.Batch | undefined = undefined;
    /**
     * Number button
     */
    @computed get numberButton() {
        const numBtnType: string = StrCast(this.rootDoc.numBtnType);
        const numScript = ScriptCast(this.rootDoc.script);
        const setValue = (value: number) => UndoManager.RunInBatch(() => numScript?.script.run({ value, _readOnly_: false }), 'set num value');

        // Script for checking the outcome of the toggle
        const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;

        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;

        if (numBtnType === NumButtonType.Slider) {
            const dropdown = (
                <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}>
                    <input
                        type="range"
                        step="1"
                        min={NumCast(this.rootDoc.numBtnMin, 0)}
                        max={NumCast(this.rootDoc.numBtnMax, 100)}
                        value={checkResult}
                        className={'menu-slider'}
                        id="slider"
                        onPointerDown={() => (this._batch = UndoManager.StartBatch('presDuration'))}
                        onPointerUp={() => this._batch?.end()}
                        onChange={e => {
                            e.stopPropagation();
                            setValue(Number(e.target.value));
                        }}
                    />
                </div>
            );
            return (
                <div className={`menuButton ${this.type} ${numBtnType}`} onPointerDown={e => e.stopPropagation()} onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
                    {checkResult}
                    {label}
                    {this.rootDoc.dropDownOpen ? dropdown : null}
                </div>
            );
        } else if (numBtnType === NumButtonType.DropdownOptions) {
            const items: number[] = [];
            for (let i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    items.push(i);
                }
            }
            const list = items.map(value => {
                return (
                    <div
                        className="list-item"
                        key={`${value}`}
                        style={{
                            backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined,
                        }}
                        onClick={() => setValue(value)}>
                        {value}
                    </div>
                );
            });
            return (
                <div className={`menuButton ${this.type} ${numBtnType}`}>
                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) - 1))}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'minus'} />
                    </div>
                    <div
                        className={`button ${'number'}`}
                        onPointerDown={e => {
                            e.stopPropagation();
                            e.preventDefault();
                        }}
                        onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
                        <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} onChange={undoBatch(action(e => setValue(Number(e.target.value))))} />
                    </div>
                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) + 1))}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} />
                    </div>

                    {this.rootDoc.dropDownOpen ? (
                        <div>
                            <div className="menuButton-dropdownList" style={{ left: '25%' }}>
                                {list}
                            </div>
                            <div
                                className="dropbox-background"
                                onClick={e => {
                                    e.stopPropagation();
                                    this.rootDoc.dropDownOpen = false;
                                }}
                            />
                        </div>
                    ) : null}
                </div>
            );
        } else {
            return <div />;
        }
    }

    /**
     * Dropdown button
     */
    @computed get dropdownButton() {
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        return (
            <div
                className={`menuButton ${this.type} ${active}`}
                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
                {this.Icon(color)}
                {!this.label || !FontIconBox.GetShowLabels() ? null : (
                    <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                        {' '}
                        {this.label}{' '}
                    </div>
                )}
                <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
                </div>
                {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null}
            </div>
        );
    }

    /**
     * Dropdown list
     */
    @computed get dropdownListButton() {
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);

        const script = ScriptCast(this.rootDoc.script);

        let noviceList: string[] = [];
        let text: string | undefined;
        let dropdown = true;
        let icon: IconProp = 'caret-down';
        try {
            if (script?.script.originalScript.startsWith('setView')) {
                const selected = SelectionManager.Docs().lastElement();
                if (selected) {
                    if (StrCast(selected.type) === DocumentType.COL) {
                        text = StrCast(selected._viewType);
                    } else {
                        dropdown = false;
                        text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
                        icon = Doc.toIcon(selected);
                    }
                } else {
                    dropdown = false;
                    icon = 'globe-asia';
                    text = 'User Default';
                }
                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
            } else if (script?.script.originalScript.startsWith('setFont')) {
                const editorView = RichTextMenu.Instance?.TextView?.EditorView;
                text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
                noviceList = ['Roboto', 'Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text'];
            }
        } catch (e) {
            console.log(e);
        }

        // Get items to place into the list
        const list = this.buttonList
            .filter(value => !Doc.noviceMode || noviceList.includes(value))
            .map(value => (
                <div
                    className="list-item"
                    key={`${value}`}
                    style={{
                        fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined,
                        backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
                    }}
                    onClick={undoBatch(() => script.script.run({ value }))}>
                    {value[0].toUpperCase() + value.slice(1)}
                </div>
            ));

        const label =
            !this.label || !FontIconBox.GetShowLabels() ? null : (
                <div className="fontIconBox-label" style={{ bottom: 0, position: 'absolute', color: color, backgroundColor: backgroundColor }}>
                    {this.label}
                </div>
            );

        return (
            <div
                className={`menuButton ${this.type} ${active}`}
                style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : 'flex' }}
                onClick={dropdown ? () => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen) : undefined}>
                {dropdown ? null : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
                <div className="menuButton-dropdown-header">{text && text[0].toUpperCase() + text.slice(1)}</div>
                {label}
                {!dropdown ? null : (
                    <div className="menuButton-dropDown">
                        <FontAwesomeIcon icon={icon} color={color} size="sm" />
                    </div>
                )}
                {this.rootDoc.dropDownOpen ? (
                    <div>
                        <div className="menuButton-dropdownList" style={{ left: 0 }}>
                            {list}
                        </div>
                        <div
                            className="dropbox-background"
                            onClick={e => {
                                e.stopPropagation();
                                this.rootDoc.dropDownOpen = false;
                            }}
                        />
                    </div>
                ) : null}
            </div>
        );
    }

    @observable colorPickerClosed: boolean = true;
    @computed get colorScript() {
        return ScriptCast(this.rootDoc.script);
    }

    colorPicker = (curColor: string) => {
        const change = (value: ColorState, ev: MouseEvent) => {
            ev.preventDefault();
            ev.stopPropagation();
            const s = this.colorScript;
            s && undoBatch(() => s.script.run({ value: Utils.colorString(value), _readOnly_: false }).result)();
        };
        const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent'];
        return <SketchPicker onChange={change as any /* SketchPicker passes the mouse event to the callback, but the type system doesn't know that */} color={curColor} presetColors={presets} />;
    };
    /**
     * Color button
     */
    @computed get colorButton() {
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? 'transparent';

        const label =
            !this.label || !FontIconBox.GetShowLabels() ? null : (
                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                    {this.label}
                </div>
            );

        // dropdown caret seems superfluous since clicking the color button does the same thing
        // const dropdownCaret = <div
        //     className="menuButton-dropDown"
        //     style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
        //     <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
        // </div>;
        //setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
        return (
            <div
                className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')} ${this.colorPickerClosed}`}
                style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                onClick={action(e => {
                    this.colorPickerClosed = !this.colorPickerClosed;
                    e.stopPropagation();
                })}
                onPointerDown={e => e.stopPropagation()}>
                {this.Icon(color)}
                <div className="colorButton-color" style={{ backgroundColor: curColor }} />
                {label}
                {/* {dropdownCaret} */}
                {this.colorPickerClosed ? null : (
                    <div>
                        <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
                            {this.colorPicker(curColor)}
                        </div>
                        <div
                            className="dropbox-background"
                            onPointerDown={action(e => {
                                e.preventDefault();
                                e.stopPropagation();
                                this.colorPickerClosed = true;
                            })}
                        />
                    </div>
                )}
            </div>
        );
    }

    @computed get toggleButton() {
        // Determine the type of toggle button
        const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
        const buttonText: string = StrCast(this.rootDoc.buttonText);
        // Colors
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);

        // Button label
        const label =
            !this.label || !FontIconBox.GetShowLabels() ? null : (
                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                    {this.label}
                </div>
            );

        if (switchToggle) {
            return (
                <div className={`menuButton ${this.type} ${'switch'}`}>
                    {buttonText ? buttonText : null}
                    <label className="switch">
                        <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} />
                        <span className="slider round" />
                    </label>
                </div>
            );
        } else {
            return (
                <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}>
                    {this.Icon(color)}
                    {label}
                </div>
            );
        }
    }

    /**
     * Default
     */
    @computed get defaultButton() {
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        return (
            <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                <div className="menuButton-wrap">
                    {this.Icon(color)}
                    {!this.label || !FontIconBox.GetShowLabels() ? null : (
                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                            {' '}
                            {this.label}{' '}
                        </div>
                    )}
                </div>
            </div>
        );
    }

    @computed get editableText() {
        // Script for running the toggle
        const script = ScriptCast(this.rootDoc.script);
        // Function to run the script
        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;

        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
        return (
            <div className="menuButton editableText">
                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
                <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} contents={checkResult} />
                </div>
            </div>
        );
    }

    render() {
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        const label = (noBackground: boolean = false) =>
            !this.label || !FontIconBox.GetShowLabels() ? null : (
                <div className="fontIconBox-label" style={{ color, backgroundColor: noBackground ? 'transparent' : backgroundColor }}>
                    {this.label}
                </div>
            );
        // TODO:glr Add label of button type
        let button: JSX.Element = this.defaultButton;

        // prettier-ignore
        switch (this.type) {
            case ButtonType.DropdownList: return this.dropdownListButton;
            case ButtonType.ColorButton: return this.colorButton; 
            case ButtonType.NumberButton: return this.numberButton; 
            case ButtonType.EditableText: return this.editableText;
            case ButtonType.DropdownButton: button = this.dropdownButton; break;
            case ButtonType.ToggleButton: button = this.toggleButton; break;
            case ButtonType.TextButton: 
                    // Script for checking the outcome of the toggle
                    const script = ScriptCast(this.rootDoc.script);
                    const checkResult = script?.script.run({ _readOnly_: true }).result;
                    button = (
                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor:checkResult ?? backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
                        {this.Icon(color)}
                        {StrCast(this.rootDoc.buttonText) ? <div className="button-text">{StrCast(this.rootDoc.buttonText)}</div> : null}
                        {label()}
                    </div>
                );
                break;
            case ButtonType.ClickButton:
            case ButtonType.ToolButton: button = (
                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
                        {this.Icon(color)}
                        {label()}
                    </div>
                );
                break;
            case ButtonType.MenuButton: button = (
                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
                        {this.Icon(color)}
                        {label(true)}
                        <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
                    </div>
                );
                break;
        }

        return !this.layoutDoc.toolTip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>;
    }
}

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setView(view: string) {
    const selected = SelectionManager.Docs().lastElement();
    selected ? (selected._viewType = view) : console.log('[FontIconBox.tsx] changeView failed');
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Views().lastElement()?.props.Document ?? LinkManager.currentLink;
    if (checkResult) {
        return selected?._backgroundColor ?? 'transparent';
    }
    if (selected) selected._backgroundColor = color;
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) {
    if (checkResult) {
        return Doc.SharingDoc().userColor;
    }
    Doc.SharingDoc().userColor = undefined;
    Doc.GetProto(Doc.SharingDoc()).userColor = color;
    Doc.UserDoc().showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().showTitle, 'creationDate');
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    if (checkResult) {
        if (NumCast(selected?.Document.z) >= 1) return Colors.MEDIUM_BLUE;
        return 'transparent';
    }
    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
});

/** TEXT
 *      setFont
 *      setFontSize
 *      toggleBold
 *      toggleUnderline
 *      toggleItalic
 *      setAlignment
 *      toggleBold
 *      toggleItalic
 *      toggleUnderline
 **/

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setFont(font: string, checkResult?: boolean) {
    if (checkResult) return RichTextMenu.Instance?.fontFamily;
    font && RichTextMenu.Instance.setFontFamily(font);
});

ScriptingGlobals.add(function getActiveTextInfo(info: 'family' | 'size' | 'color' | 'highlight') {
    const editorView = RichTextMenu.Instance.TextView?.EditorView;
    const style = editorView?.state && RichTextMenu.Instance.getActiveFontStylesOnSelection();
    // prettier-ignore
    switch (info) {
        case 'family':    return style?.activeFamilies[0];
        case 'size':      return style?.activeSizes[0];
        case 'color':     return style?.activeColors[0];
        case 'highlight': return style?.activeHighlights[0];
    }
});

ScriptingGlobals.add(function setAlignment(align: 'left' | 'right' | 'center', checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        return (editorView ? RichTextMenu.Instance.textAlign : Doc.UserDoc().textAlign) === align ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (editorView?.state) RichTextMenu.Instance.align(editorView, editorView.dispatch, align);
    else Doc.UserDoc().textAlign = align;
});

ScriptingGlobals.add(function setBulletList(mapStyle: 'bullet' | 'decimal', checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
        if (active === mapStyle) return Colors.MEDIUM_BLUE;
        return 'transparent';
    }
    editorView?.state && RichTextMenu.Instance.changeListType(mapStyle);
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setFontColor(color?: string, checkResult?: boolean) {
    if (checkResult) return RichTextMenu.Instance.fontColor;
    color && RichTextMenu.Instance.setColor(color);
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setFontHighlight(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Docs().lastElement();
    const editorView = RichTextMenu.Instance.TextView?.EditorView;

    if (checkResult) {
        return (selected ?? Doc.UserDoc())._fontHighlight;
    }
    if (selected) {
        selected._fontColor = color;
        if (color) {
            editorView?.state && RichTextMenu.Instance.setHighlight(color, editorView, editorView?.dispatch);
        }
    }
    Doc.UserDoc()._fontHighlight = color;
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setFontSize(size: string | number, checkResult?: boolean) {
    if (checkResult) {
        return RichTextMenu.Instance?.fontSize.replace('px', '');
    }
    if (typeof size === 'number') size = size.toString();
    if (size && Number(size).toString() === size) size += 'px';
    RichTextMenu.Instance.setFontSize(size);
});
ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (editorView) RichTextMenu.Instance?.toggleNoAutoLinkAnchor();
});
ScriptingGlobals.add(function toggleDictation(checkResult?: boolean) {
    const textView = RichTextMenu.Instance?.TextView;
    if (checkResult) {
        return textView?._recording ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (textView) runInAction(() => (textView._recording = !textView._recording));
});

ScriptingGlobals.add(function toggleBold(checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === 'bold') ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (editorView) RichTextMenu.Instance?.toggleBold();
    else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold';
});

ScriptingGlobals.add(function toggleUnderline(checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === 'underline') ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (editorView) RichTextMenu.Instance?.toggleUnderline();
    else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline';
});

ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) {
    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
    if (checkResult) {
        return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === 'italics') ? Colors.MEDIUM_BLUE : 'transparent';
    }
    if (editorView) RichTextMenu.Instance?.toggleItalics();
    else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics';
});

export function checkInksToGroup() {
    // console.log("getting here to inks group");
    if (Doc.ActiveTool === InkTool.Write) {
        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
            // find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other
            const inksToGroup = ffView.unprocessedDocs.filter(inkDoc => {
                // console.log(inkDoc.x, inkDoc.y);
            });
        });
    }
}

export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
    // TODO nda - if document being added to is a inkGrouping then we can just add to that group
    if (Doc.ActiveTool === InkTool.Write) {
        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
            const selected = ffView.unprocessedDocs;
            // loop through selected an get the bound
            const bounds: { x: number; y: number; width?: number; height?: number }[] = [];

            selected.map(
                action(d => {
                    const x = NumCast(d.x);
                    const y = NumCast(d.y);
                    const width = d[WidthSym]();
                    const height = d[HeightSym]();
                    bounds.push({ x, y, width, height });
                })
            );

            const aggregBounds = aggregateBounds(bounds, 0, 0);
            const marqViewRef = ffView._marqueeViewRef.current;

            // set the vals for bounds in marqueeView
            if (marqViewRef) {
                marqViewRef._downX = aggregBounds.x;
                marqViewRef._downY = aggregBounds.y;
                marqViewRef._lastX = aggregBounds.r;
                marqViewRef._lastY = aggregBounds.b;
            }

            selected.map(
                action(d => {
                    const dx = NumCast(d.x);
                    const dy = NumCast(d.y);
                    delete d.x;
                    delete d.y;
                    delete d.activeFrame;
                    delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
                    delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
                    // calculate pos based on bounds
                    if (marqViewRef?.Bounds) {
                        d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
                        d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
                    }
                    return d;
                })
            );
            ffView.props.removeDocument?.(selected);
            // TODO: nda - this is the code to actually get a new grouped collection
            const newCollection = marqViewRef?.getCollection(selected, undefined, true);
            if (newCollection) {
                newCollection.height = newCollection[HeightSym]();
                newCollection.width = newCollection[WidthSym]();
            }

            // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
            newCollection && ffView.props.addDocument?.(newCollection);
            // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
            ffView.unprocessedDocs = [];

            InkTranscription.Instance.transcribeInk(newCollection, selected, false);
        });
    }
    CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
}

function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, checkResult?: boolean) {
    InkTranscription.Instance?.createInkGroup();
    if (checkResult) {
        return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool
            ? GestureOverlay.Instance?.KeepPrimitiveMode || ![GestureUtils.Gestures.Circle, GestureUtils.Gestures.Line, GestureUtils.Gestures.Rectangle].includes(tool as GestureUtils.Gestures)
                ? Colors.MEDIUM_BLUE
                : Colors.MEDIUM_BLUE_ALT
            : 'transparent';
    }
    runInAction(() => {
        if (GestureOverlay.Instance) {
            GestureOverlay.Instance.KeepPrimitiveMode = keepPrim;
        }
        if (Object.values(GestureUtils.Gestures).includes(tool as any)) {
            if (GestureOverlay.Instance.InkShape === tool) {
                Doc.ActiveTool = InkTool.None;
                GestureOverlay.Instance.InkShape = undefined;
            } else {
                Doc.ActiveTool = InkTool.Pen;
                GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures;
            }
        } else if (tool) {
            // pen or eraser
            if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape) {
                Doc.ActiveTool = InkTool.None;
            } else {
                Doc.ActiveTool = tool as any;
                GestureOverlay.Instance.InkShape = undefined;
            }
        } else {
            Doc.ActiveTool = InkTool.None;
        }
    });
}

ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setIsInkMask(checkResult?: boolean) {
    const selected = SelectionManager.Docs().lastElement();
    if (checkResult) {
        if (selected?.type === DocumentType.INK) {
            return BoolCast(selected.isInkMask) ? Colors.MEDIUM_BLUE : 'transparent';
        }
        return ActiveIsInkMask() ? Colors.MEDIUM_BLUE : 'transparent';
    }
    SetActiveIsInkMask(!ActiveIsInkMask());
    SelectionManager.Docs()
        .filter(doc => doc.type === DocumentType.INK)
        .map(doc => (doc.isInkMask = !doc.isInkMask));
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setFillColor(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Docs().lastElement();
    if (checkResult) {
        if (selected?.type === DocumentType.INK) {
            return StrCast(selected.fillColor);
        }
        return ActiveFillColor();
    }
    SetActiveFillColor(StrCast(color));
    SelectionManager.Docs()
        .filter(doc => doc.type === DocumentType.INK)
        .map(doc => (doc.fillColor = color));
});

ScriptingGlobals.add(function setStrokeWidth(width: number, checkResult?: boolean) {
    if (checkResult) {
        const selected = SelectionManager.Docs().lastElement();
        if (selected?.type === DocumentType.INK) {
            return NumCast(selected.strokeWidth);
        }
        return ActiveInkWidth();
    }
    SetActiveInkWidth(width.toString());
    SelectionManager.Docs()
        .filter(doc => doc.type === DocumentType.INK)
        .map(doc => (doc.strokeWidth = Number(width)));
});

// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setStrokeColor(color?: string, checkResult?: boolean) {
    if (checkResult) {
        const selected = SelectionManager.Docs().lastElement();
        if (selected?.type === DocumentType.INK) {
            return StrCast(selected.color);
        }
        return ActiveInkColor();
    }
    SetActiveInkColor(StrCast(color));
    SelectionManager.Docs()
        .filter(doc => doc.type === DocumentType.INK)
        .map(doc => (doc.color = String(color)));
});

/** WEB
 *      webSetURL
 **/
ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) {
    const selected = SelectionManager.Views().lastElement();
    if (selected?.rootDoc.type === DocumentType.WEB) {
        if (checkResult) {
            return StrCast(selected.rootDoc.data, Cast(selected.rootDoc.data, WebField, null)?.url?.href);
        }
        (selected.ComponentView as WebBox).submitURL(url);
        //selected.rootDoc.data = new WebField(url);
    }
});
ScriptingGlobals.add(function webForward(checkResult?: boolean) {
    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
    if (checkResult) {
        return selected?.forward(checkResult) ? undefined : 'lightGray';
    }
    selected?.forward();
});
ScriptingGlobals.add(function webBack(checkResult?: boolean) {
    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
    if (checkResult) {
        return selected?.back(checkResult) ? undefined : 'lightGray';
    }
    selected?.back();
});

/** Schema
 *      toggleSchemaPreview
 **/
ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
    const selected = SelectionManager.Docs().lastElement();
    if (checkResult && selected) {
        const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
        if (result) return Colors.MEDIUM_BLUE;
        else return 'transparent';
    } else if (selected) {
        if (NumCast(selected.schemaPreviewWidth) > 0) {
            selected.schemaPreviewWidth = 0;
        } else {
            selected.schemaPreviewWidth = 200;
        }
    }
});

/** STACK
 *      groupBy
 */
ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) {
    SelectionManager.Docs().map(doc => (doc._fontFamily = key));
    const editorView = RichTextMenu.Instance.TextView?.EditorView;
    if (checkResult) {
        return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
    }
    if (editorView) RichTextMenu.Instance.setFontFamily(key);
    else Doc.UserDoc().fontFamily = key;
});