import { Tooltip } from '@mui/material';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnEmptyFilter, returnFalse, returnZero } from '../../../ClientUtils';
import { emptyFunction } from '../../../Utils';
import { Doc, Field, returnEmptyDoclist } from '../../../fields/Doc';
import { DocCast } from '../../../fields/Types';
import { DocumentOptions, FInfo } from '../../documents/Documents';
import { Transform } from '../../util/Transform';
import { undoable } from '../../util/UndoManager';
import { ContextMenu } from '../ContextMenu';
import { EditableView } from '../EditableView';
import { ObservableReactComponent } from '../ObservableReactComponent';
import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
import './KeyValueBox.scss';
import './KeyValuePair.scss';
import { OpenWhere } from './OpenWhere';

// Represents one row in a key value plane

export interface KeyValuePairProps {
    rowStyle: string;
    keyName: string;
    doc: Doc;
    keyWidth: number;
    PanelHeight: () => number;
    PanelWidth: () => number;
    addDocTab: (doc: Doc, where: OpenWhere) => boolean;
}
@observer
export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
    @observable private isPointerOver = false;
    @observable public isChecked = false;
    private checkbox = React.createRef<HTMLInputElement>();
    constructor(props: KeyValuePairProps) {
        super(props);
        makeObservable(this);
    }

    @action
    handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.isChecked = e.currentTarget.checked;
    };

    @action
    uncheck = () => {
        this.checkbox.current!.checked = false;
        this.isChecked = false;
    };

    onContextMenu = (e: React.MouseEvent) => {
        const value = this._props.doc[this._props.keyName];
        if (value instanceof Doc) {
            e.stopPropagation();
            e.preventDefault();
            ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this._props.addDocTab(value, OpenWhere.addRightKeyvalue), icon: 'layer-group' });
            ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
        }
    };

    render() {
        // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
        const layoutField = this._props.keyName.startsWith('_');
        let doc = layoutField ? Doc.Layout(this._props.doc) : this._props.doc;
        let protoCount = doc !== this._props.doc && !layoutField ? 1 : 0;
        while (doc) {
            if (Object.keys(doc).includes(this._props.keyName.replace(/^_/, ''))) {
                break;
            }
            protoCount++;
            doc = DocCast(doc.proto);
        }
        const parenCount = Math.max(0, protoCount);
        const keyStyle = protoCount === 0 && doc === this._props.doc ? 'black' : 'blue';

        const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };

        return (
            <tr
                className={this._props.rowStyle}
                onPointerEnter={action(() => {
                    this.isPointerOver = true;
                })}
                onPointerLeave={action(() => {
                    this.isPointerOver = false;
                })}>
                <td className="keyValuePair-td-key" style={{ width: `${this._props.keyWidth}%` }}>
                    <div className="keyValuePair-td-key-container">
                        <button
                            type="button"
                            style={hover}
                            className="keyValuePair-td-key-delete"
                            onClick={undoable(() => {
                                if (Object.keys(this._props.doc).indexOf(this._props.keyName) !== -1) {
                                    delete this._props.doc[this._props.keyName];
                                } else delete DocCast(this._props.doc.proto)?.[this._props.keyName];
                            }, 'set key value')}>
                            X
                        </button>
                        <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
                        <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === this._props.keyName)?.[1].description ?? ''}>
                            <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (this._props.keyName.replace(/__/g, '').replace(/^_/, '').match(/_/g)?.length || 0), color: keyStyle }}>
                                {(layoutField ? '_' : '$').repeat(parenCount)}
                                {(keyStyle === 'blue' && !layoutField && !parenCount ? '$' : '') + this._props.keyName}
                            </div>
                        </Tooltip>
                    </div>
                </td>
                <td className="keyValuePair-td-value" style={{ width: `${100 - this._props.keyWidth}%` }} onContextMenu={this.onContextMenu}>
                    <div className="keyValuePair-td-value-container">
                        <EditableView
                            contents={''}
                            fieldContents={{
                                Document: this._props.doc,
                                childFilters: returnEmptyFilter,
                                childFiltersByRanges: returnEmptyFilter,
                                searchFilterDocs: returnEmptyDoclist,
                                styleProvider: DefaultStyleProvider,
                                docViewPath: returnEmptyDocViewList,
                                fieldKey: this._props.keyName,
                                isSelected: returnFalse,
                                setHeight: returnFalse,
                                select: emptyFunction,
                                renderDepth: 1,
                                isContentActive: returnFalse,
                                whenChildContentsActiveChanged: emptyFunction,
                                ScreenToLocalTransform: Transform.Identity,
                                focus: emptyFunction,
                                PanelWidth: this._props.PanelWidth,
                                PanelHeight: this._props.PanelHeight,
                                addDocTab: returnFalse,
                                pinToPres: returnZero,
                            }}
                            GetValue={() => Field.toKeyValueString(this._props.doc, this._props.keyName)}
                            SetValue={(value: string) => Doc.SetField(this._props.doc, this._props.keyName, value)}
                        />
                    </div>
                </td>
            </tr>
        );
    }
}