"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = exports.TRANSCEND_HEIGHT = exports.TRANSCEND_WIDTH = void 0;
const addListener_1 = require("../../../../../client/addListener");
const ANIMATION_C_1 = require("../../../../../client/animation/ANIMATION_C");
const ANIMATION_T_S_1 = require("../../../../../client/animation/ANIMATION_T_S");
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const pointerdown_1 = require("../../../../../client/event/pointer/pointerdown");
const pointerleave_1 = require("../../../../../client/event/pointer/pointerleave");
const pointermove_1 = require("../../../../../client/event/pointer/pointermove");
const pointerup_1 = require("../../../../../client/event/pointer/pointerup");
const resize_1 = require("../../../../../client/event/resize");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const whenInteracted_1 = require("../../../../../client/whenInteracted");
const f_1 = require("../../../../core/relation/Clamp/f");
const Component_1 = require("../../Div/Component");
const Component_2 = require("../../Icon/Component");
exports.TRANSCEND_WIDTH = 33;
exports.TRANSCEND_HEIGHT = exports.TRANSCEND_WIDTH;
exports.DEFAULT_STYLE = {
    position: 'absolute',
    top: '0px',
    left: '50%',
    transform: 'translateX(-50%)',
    width: `${exports.TRANSCEND_WIDTH}px`,
    height: `${exports.TRANSCEND_HEIGHT}px`,
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: 'currentColor',
    borderBottomLeftRadius: '50%',
    borderBottomRightRadius: '50%',
    cursor: 'pointer',
    display: 'flex',
    justifyContent: 'center',
    touchAction: 'none',
    alignItems: 'center',
    // borderTop: 'none',
    marginTop: '-4px',
    // transition: 'top ${ANIMATION_T_S}s linear',
    transition: `opacity ${ANIMATION_T_S_1.ANIMATION_T_S}s linear`,
};
class Transcend extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._x = 0;
        this._get_style_left = () => {
            return `calc(50% + ${this._x + 3}px)`;
        };
        this._get_style = () => {
            const { style } = this.$props;
            const left = this._get_style_left();
            const top = `${this._y}px`;
            return Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style), { left,
                top });
        };
        this._refresh_style = () => {
            // console.log('Transcend', '_refresh_style')
            const style = this._get_style();
            this._container.setProp('style', style);
        };
        this._translate = (x) => {
            // console.log('Transcend', '_translate', x)
            const { $width } = this.$context;
            this._x = (0, f_1.default)({
                a: x,
                min: exports.TRANSCEND_WIDTH / 2 - $width / 2 + 0,
                max: $width / 2 - exports.TRANSCEND_WIDTH / 2 - 3 - 3,
            }).a;
            this._refresh_style();
        };
        this._on_context_resize = ({ width, height, }) => {
            const { $width } = this.$context;
            // console.log('Transcend', '_on_context_resize', width, height)
            const dw = width - $width;
            const dw2 = dw / 2;
            // this._translate(this._x + dw2)
            this._translate(this._x);
        };
        this._hidden = false;
        this._down = false;
        this._y = 0;
        this._y_target = 0;
        this._animate_y = (target_y) => {
            const { api: { animation: { requestAnimationFrame, cancelAnimationFrame }, }, } = this.$system;
            this._y_target = target_y;
            if (this._y_animation) {
                cancelAnimationFrame(this._y_animation);
            }
            const dy0 = this._y_target - this._y;
            const k = ((dy0 / 12) * ANIMATION_T_S_1.ANIMATION_T_S) / 0.2;
            const anim = () => {
                const dy = this._y_target - this._y;
                const k = (dy * ANIMATION_C_1.ANIMATION_C) / 2;
                if (Math.abs(dy) >= 1) {
                    this._y += k;
                    this._y_animation = requestAnimationFrame(anim);
                }
                else {
                    this._y = this._y_target;
                }
                (0, mergeStyle_1.default)(this._container, {
                    top: `${this._y}px`,
                });
            };
            this._y_animation = requestAnimationFrame(anim);
        };
        const { style = {}, down } = this.$props;
        const icon = new Component_2.default({
            icon: 'chevron-up',
            style: {
                transform: down
                    ? `rotate3d(1, 0, 0, 180deg)`
                    : `rotate3d(1, 0, 0, 180deg)`,
                width: '24px',
                height: '24px',
            },
        }, this.$system);
        this._icon = icon;
        const left = this._get_style_left();
        const container = new Component_1.default({
            style: Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style), { left }),
            title: 'transcend',
        }, this.$system);
        container.registerParentRoot(icon);
        container.addEventListeners([
            (0, pointerdown_1.makePointerDownListener)(({ pointerId, clientX }) => {
                // log('Transcend', '_on_pointer_down')
                let _clientX = clientX - this._x;
                container.setPointerCapture(pointerId);
                const unlisten = container.addEventListeners([
                    (0, pointermove_1.makePointerMoveListener)(({ clientX }) => {
                        this._translate(clientX - _clientX);
                    }),
                    (0, pointerup_1.makePointerUpListener)(() => {
                        container.releasePointerCapture(pointerId);
                        unlisten();
                    }),
                    (0, pointerleave_1.makePointerLeaveListener)(() => {
                        container.releasePointerCapture(pointerId);
                        unlisten();
                    }),
                ]);
            }),
        ]);
        const reset_dim = () => {
            let on_active = () => {
                (0, mergeStyle_1.default)(container, {
                    opacity: '1',
                });
            };
            let on_inactive = () => {
                if (!this._down) {
                    return;
                }
                (0, mergeStyle_1.default)(container, {
                    opacity: `${whenInteracted_1.DIM_OPACITY}`,
                });
            };
            const unlisten_interacted = (0, whenInteracted_1.whenInteracted)(container, 3000, true, on_active, on_inactive);
            on_active();
        };
        reset_dim();
        this._container = container;
        const $element = (0, parentElement_1.default)($system);
        this.$element = $element;
        this.$slot = container.$slot;
        this.$subComponent = {
            container,
            icon,
        };
        this.$unbundled = false;
        this.registerRoot(container);
        this._refresh_style();
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._refresh_style();
        }
    }
    onMount() {
        // console.log('Transcend', 'onMount')
        const {} = this.$context;
        this._translate(this._x);
        this._context_unlisten = (0, addListener_1.addListeners)(this.$context, [
            (0, resize_1.makeResizeListener)(this._on_context_resize),
        ]);
    }
    onUnmount() {
        // console.log('Transcend', 'onUnmount')
        this._context_unlisten();
    }
    up(animate = true) {
        // console.log('Transcend', 'up')
        this._down = false;
        (0, mergeStyle_1.default)(this._icon, {
            transform: `rotate3d(1, 0, 0, 0deg)`,
            transition: animate ? `transform ${ANIMATION_T_S_1.ANIMATION_T_S}s linear` : '',
        });
    }
    down(animate = true) {
        // console.log('Transcend', 'down')
        this._down = true;
        (0, mergeStyle_1.default)(this._icon, {
            transform: `rotate3d(1, 0, 0, 180deg)`,
            transition: animate ? `transform ${ANIMATION_T_S_1.ANIMATION_T_S}s linear` : '',
        });
    }
    hide(animate = true) {
        // console.log('Transcend', 'hide', animate)
        this._hidden = true;
        if (animate) {
            this._animate_y(-exports.TRANSCEND_HEIGHT);
        }
        else {
            this._y = -exports.TRANSCEND_HEIGHT;
            (0, mergeStyle_1.default)(this._container, {
                top: `${this._y}px`,
            });
        }
    }
    show(animate = true) {
        // console.log('Transcend', 'show', animate)
        this._hidden = false;
        if (animate) {
            this._animate_y(0);
        }
        else {
            this._y = 0;
            (0, mergeStyle_1.default)(this._container, {
                top: `${this._y}px`,
            });
        }
    }
}
exports.default = Transcend;
//# sourceMappingURL=Component.js.map