"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const addListener_1 = require("../../../../../client/addListener");
const classnames_1 = require("../../../../../client/classnames");
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const custom_1 = require("../../../../../client/event/custom");
const click_1 = require("../../../../../client/event/pointer/click");
const mode_1 = require("../../../../../client/mode");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const theme_1 = require("../../../../../client/theme");
const userSelect_1 = require("../../../../../client/util/style/userSelect");
const Component_1 = require("../../Div/Component");
const Component_2 = require("../../svg/Rect/Component");
const Component_3 = require("../ModeIconButton/Component");
exports.DEFAULT_STYLE = {
    width: 'auto',
    height: '195px',
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
    padding: '6px',
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: 'currentColor',
    borderLeft: 'none',
    borderTopRightRadius: '3px',
    borderBottomRightRadius: '3px',
    boxSizing: 'content-box',
};
const CRUD_MARGIN = 4;
const NON_CRUD_MARGIN = 12;
const ICON_WIDTH = 21;
const MODE_TOP = {
    none: 0,
    info: 6,
    change: 6 + 1 * ICON_WIDTH + NON_CRUD_MARGIN + CRUD_MARGIN,
    remove: 6 + 2 * ICON_WIDTH + 1 * NON_CRUD_MARGIN + 4 * CRUD_MARGIN,
    add: 6 + 3 * ICON_WIDTH + 1 * NON_CRUD_MARGIN + 7 * CRUD_MARGIN,
    data: 6 + 4 * ICON_WIDTH + 1 * NON_CRUD_MARGIN + 10 * CRUD_MARGIN,
    multiselect: 6 + 5 * ICON_WIDTH + 2 * NON_CRUD_MARGIN + 11 * CRUD_MARGIN + 1,
};
const MODE_ICON = {
    info: 'description',
    change: 'exchange',
    remove: 'x',
    add: 'plus-2',
    data: 'data',
    multiselect: 'brackets',
};
const MODE_SHORTCUT = {
    info: 'q',
    change: 'f',
    remove: 'd',
    add: 's',
    data: 'a',
    multiselect: 'Shift',
};
class Modes extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._mode_button_container = {};
        this._mode_button = {};
        this._mode = 'none';
        this._mode_active_color = (mode) => {
            const { $theme } = this.$context;
            const { style = {} } = this.$props;
            const { color = 'currentColor' } = style;
            const active_color = (0, theme_1.getThemeModeColor)($theme, mode, color);
            return active_color;
        };
        this._toggle_mode = (mode) => {
            if (this._mode === mode) {
                if (this._mode !== 'none') {
                    this._enter_mode('none');
                }
            }
            else {
                this._enter_mode(mode);
            }
        };
        this.show_tooltips = () => {
            for (const mode of mode_1.MODE_LIST) {
                const mode_button = this._mode_button[mode];
                mode_button.showTooltip();
            }
        };
        this.hide_tooltips = () => {
            for (const mode of mode_1.MODE_LIST) {
                const mode_button = this._mode_button[mode];
                mode_button.hideTooltip();
            }
        };
        this._enter_mode = (mode) => {
            const { disabled } = this.$props;
            if (disabled) {
                return;
            }
            if (this._mode !== mode) {
                const prev_mode = this._mode;
                if (prev_mode !== 'none') {
                    const prev_button = this._mode_button[prev_mode];
                    prev_button.setProp('active', false);
                }
                this._mode = mode;
                if (mode !== 'none') {
                    const current_button = this._mode_button[mode];
                    current_button.setProp('active', true);
                }
            }
            this.dispatchEvent('entermode', { mode });
            if (mode === 'none') {
                (0, mergeStyle_1.mergePropStyle)(this._selector, {
                    borderColor: theme_1.COLOR_NONE,
                });
            }
            else {
                const mode_top = MODE_TOP[mode];
                (0, mergeStyle_1.mergePropStyle)(this._selector, {
                    top: `${mode_top - 2}px`,
                    borderColor: this._mode_active_color(mode),
                });
            }
        };
        this._reset_color = () => {
            // console.log('ModeSelector', '_reset_color')
            if (this.$context) {
                const { $theme } = this.$context;
                const { style = {} } = this.$props;
                const { color = 'currentColor' } = style;
                for (const mode of mode_1.MODE_LIST) {
                    const mode_button = this._mode_button[mode];
                    const mode_color = (0, theme_1.getThemeModeColor)($theme, mode, color);
                    (0, mergeStyle_1.mergePropStyle)(mode_button, {
                        color,
                    });
                    mode_button.setProp('hoverColor', mode_color);
                    mode_button.setProp('activeColor', mode_color);
                }
            }
        };
        const { className, style = {} } = this.$props;
        const { color = 'currentColor' } = style;
        const selector = new Component_1.default({
            style: {
                position: 'absolute',
                width: '23px',
                height: '23px',
                left: '4px',
                top: '4px',
                borderRadius: '1px',
                boxSizing: 'borderBox',
                pointerEvents: 'none',
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: theme_1.COLOR_NONE,
                ...(0, userSelect_1.userSelect)('none'),
            },
        }, this.$system);
        this._selector = selector;
        this._mode_button = {};
        for (const mode of mode_1.MODE_LIST) {
            const activeColor = 'currentColor';
            const icon = MODE_ICON[mode];
            const shortcut = MODE_SHORTCUT[mode];
            const mode_button_container = new Component_1.default({
                style: {
                    position: 'relative',
                    height: '21px',
                    width: '21px',
                },
            }, this.$system);
            const mode_button_touch_area = new Component_2.default({
                style: {
                    position: 'absolute',
                    top: '0px',
                    left: '0px',
                    width: '33px',
                    height: '33px',
                    transform: 'translate(-6px, -6px)',
                    stroke: 'transparent',
                    zIndex: '-1',
                    fill: 'transparent',
                    cursor: 'pointer',
                },
            }, this.$system);
            const mode_button = new Component_3.default({
                icon,
                style: {
                    position: 'relative',
                    overflow: 'visible',
                    color,
                },
                title: mode,
                activeColor,
                shortcut,
            }, this.$system);
            mode_button.appendChild(mode_button_touch_area);
            mode_button_container.addEventListener((0, click_1.makeClickListener)({
                onClick: () => {
                    this._toggle_mode(mode);
                },
            }));
            mode_button_container.appendChild(mode_button);
            this._mode_button[mode] = mode_button;
            this._mode_button_container[mode] = mode_button_container;
        }
        const crud = new Component_1.default({
            className: (0, classnames_1.classnames)('mode-crud', className),
            style: {
                width: '21px',
                height: '128px',
                display: 'flex',
                flexDirection: 'column',
                paddingTop: '4px',
                paddingBottom: '4px',
                gap: '12px',
                zIndex: '-1',
                ...(0, userSelect_1.userSelect)('none'),
            },
        }, this.$system);
        crud.registerParentRoot(this._mode_button_container['change']);
        crud.registerParentRoot(this._mode_button_container['remove']);
        crud.registerParentRoot(this._mode_button_container['add']);
        crud.registerParentRoot(this._mode_button_container['data']);
        const list = new Component_1.default({
            // className: classnames('modes-list', className),
            className: (0, classnames_1.classnames)('modes-list'),
            style: {
                ...exports.DEFAULT_STYLE,
                ...style,
            },
        }, this.$system);
        this._modes = list;
        list.registerParentRoot(selector);
        list.registerParentRoot(this._mode_button_container['info']);
        list.registerParentRoot(crud);
        list.registerParentRoot(this._mode_button_container['multiselect']);
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            list,
            crud,
            selector,
            info: this._mode_button['info'],
            change: this._mode_button['change'],
            remove: this._mode_button['remove'],
            add: this._mode_button['add'],
            data: this._mode_button['data'],
            multiselect: this._mode_button['multiselect'],
        });
        this.registerRoot(list);
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._modes.setProp('style', { ...exports.DEFAULT_STYLE, ...current });
            this._reset_color();
        }
        else if (prop === 'mode') {
            this._enter_mode(current);
        }
        else if (prop === 'disabled') {
        }
    }
    getMode() {
        return this._mode;
    }
    onMount() {
        this._context_unlisten = (0, addListener_1.addListeners)(this.$context, [
            (0, custom_1.makeCustomListener)('themechanged', this._reset_color),
        ]);
    }
    onUnmount($context) {
        this._context_unlisten();
    }
}
exports.default = Modes;
//# sourceMappingURL=Component.js.map