import config from '../global/config';
import prefix from '../global/prefix';
import alias from '../global/alias';
import Gesture from '../modules/Gesture';
import clampVal from '../utils/clampVal';
import createEl from '../utils/createEl';
import deepClone from '../utils/deepClone';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import getClientObj from '../utils/getClientObj';
import isMobi from '../utils/isMobi';
import renderTpl from '../utils/renderTpl';
import style from '../utils/style';
import toNumber from '../utils/toNumber';
import PlainElem from './PlainElem';
class RangeElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
        this.reset = () => {
            for (let k in this.propsRaw) {
                (this.propsRaw[k] !== null && this.propsRaw[k] !== false) ? this.setAttribute(k, this.propsRaw[k]) : this.removeAttribute(k);
            }
            this.listen({ name: 'reset' });
        };
        this.clear = () => {
            this.setAttribute('check', '');
            this.listen({ name: 'clear' });
        };
        this.setValues = (value, cb) => {
            this.output.value = this.correctValue(value);
            let radiusPercent = this.size.ratio.radius * 100, getTipHTML = (val) => toNumber(val, { places: this.places });
            if (Array.isArray(this.output.value)) {
                this.output.ratio = [this.getRatioFromValue(this.output.value[0]), this.getRatioFromValue(this.output.value[1])];
                let fromPercent = this.output.ratio[0] * 100, toPercent = this.output.ratio[1] * 100;
                this.handles.from.style[this.attrsMap.offset] = `${fromPercent}%`;
                this.handles.to.style[this.attrsMap.offset] = `${toPercent}%`;
                this.size.ratio.center = this.output.ratio[1];
                this.thumbEl.style[this.attrsMap.size] = `${toPercent - fromPercent}%`;
                this.thumbEl.style[this.attrsMap.offset] = `${fromPercent + radiusPercent}%`;
                this.size.thumb = this.thumbEl.getBoundingClientRect()[this.attrsMap.size];
                if (this.propsProxy.tipShow) {
                    this.bubbles.from.style[this.attrsMap.offset] = `${fromPercent}%`;
                    this.bubbles.from.innerHTML = getTipHTML(this.output.value[0]);
                    this.bubbles.to.style[this.attrsMap.offset] = `${toPercent}%`;
                    this.bubbles.to.innerHTML = getTipHTML(this.output.value[1]);
                    this.bubbles.merge.style[this.attrsMap.offset] = `${fromPercent + (toPercent - fromPercent) / 2}%`;
                    this.bubbles.merge.innerHTML = `${getTipHTML(this.output.value[0])}<i>${this.propsProxy.hyphen}</i>${getTipHTML(this.output.value[1])}`;
                    this.size.bubble.from = this.bubbles.from.getBoundingClientRect()[this.attrsMap.size];
                    this.size.bubble.to = this.bubbles.to.getBoundingClientRect()[this.attrsMap.size];
                    this.mergeTips();
                }
            }
            else {
                this.output.ratio = this.getRatioFromValue(this.output.value);
                let singlePercent = this.output.ratio * 100;
                this.handles.single.style[this.attrsMap.offset] = `${singlePercent}%`;
                this.thumbEl.style[this.attrsMap.size] = `${singlePercent + radiusPercent}%`;
                this.size.thumb = this.thumbEl.getBoundingClientRect()[this.attrsMap.size];
                if (this.propsProxy.tipShow) {
                    this.bubbles.single.style[this.attrsMap.offset] = `${singlePercent}%`;
                    this.bubbles.single.innerHTML = getTipHTML(this.output.value);
                    this.size.bubble.single = this.bubbles.single.getBoundingClientRect()[this.attrsMap.size];
                }
            }
            this.propsProxy.limitShow ? this.hideEnds() : null;
            this.inputEl.value = this.output.value + '';
            this.propsProxy.result ? this.resultEl.innerHTML = renderTpl(this.propsProxy.result.format, { value: this.output.value + '' }) : null;
            super.listen({ name: 'set', cb, params: [deepClone(this.output)] });
            return this;
        };
        this.observer.ins.on('set', (data) => {
            if (data.key === 'check') {
                this.listen({ name: 'change', params: [data.value] });
            }
            this.initialized && this.updateCache({ [data.key]: data.value });
        });
        this.places = Math.max(this.propsProxy.min.split('.')[1] ? this.propsProxy.min.split('.')[1].length : 0, this.propsProxy.max.split('.')[1] ? this.propsProxy.max.split('.')[1].length : 0);
        this.isMobi = isMobi;
        this.yCoef = this.propsProxy.axis === 'y' ? -1 : 1;
        this.tows = { from: null, to: null, single: null, thumb: null };
        this.attrsMap = this.propsProxy.axis === 'x' ? { size: 'width', offset: 'left' } : { size: 'height', offset: 'bottom' };
        this.ticks = [];
        this.output = { value: [], radio: [] };
        this.tmpRatios = [];
        this.handles = {};
        this.bubbles = {};
        this.getLimitVals();
        this.initialValue = [];
        this.keyFun = (e) => {
            e.stopPropagation();
            e.cancelable ? e.preventDefault() : null;
            if (['ArrowLeft', 'ArrowDown'].includes(e.code)) {
                this.decrease();
            }
            else if (['ArrowRight', 'ArrowUp'].includes(e.code)) {
                this.increase();
            }
            if (document.activeElement !== this) {
                document.removeEventListener('keydown', this.keyFun);
            }
        };
        this.clickFun = () => {
            if (document.activeElement === this) {
                document.removeEventListener('keydown', this.keyFun);
                document.addEventListener('keydown', this.keyFun);
            }
            else {
                document.removeEventListener('keydown', this.keyFun);
            }
        };
        if (this.propsProxy.btnshow) {
            this.decrEl.onclick = () => this.decrease();
            this.incrEl.onclick = () => this.increase();
        }
        if (this.propsProxy.multiple) {
            this.setHandleTow('from');
            this.setHandleTow('to');
            this.tmpRatios = [...this.output.ratio];
            this.thumbTow = new Gesture(this.thumbEl, {
                translate: {
                    instead: true,
                },
                onTranslating: (e) => {
                    e.orgEvt.stopPropagation();
                    e.orgEvt.cancelable ? e.orgEvt.preventDefault() : null;
                    this.slideSet(this.thumbEl, e.translate.diff[this.propsProxy.axis] * this.yCoef);
                },
                onTranslated: () => {
                    this.tmpRatios = [...this.output.ratio];
                }
            });
        }
        else {
            this.setHandleTow('single');
        }
        this.baseEl.onclick = (e) => {
            let clientObj = getClientObj(e), offset;
            if (!clientObj) {
                return false;
            }
            offset = (clientObj[this.propsProxy.axis] - this.baseEl.getBoundingClientRect()[this.attrsMap.offset]) * this.yCoef;
            if (this.propsProxy.multiple) {
                let fromOffset = this.output.ratio[0] * this.size.track, toOffset = this.output.ratio[1] * this.size.track;
                if (offset > toOffset) {
                    this.slideSet(this.thumbEl, offset - toOffset - this.size.handle / 2);
                }
                else if (offset < toOffset) {
                    this.slideSet(this.thumbEl, offset - fromOffset - this.size.handle / 2);
                }
                this.tmpRatios = [...this.output.ratio];
            }
            else {
                this.slideSet(this.handles.single, offset - this.size.handle / 2);
            }
        };
        if (!this.propsProxy.multiple) {
            this.thumbEl.onclick = (e) => {
                let clientObj = getClientObj(e), offset;
                if (clientObj) {
                    offset = (clientObj[this.propsProxy.axis] - this.baseEl.getBoundingClientRect()[this.attrsMap.offset]) * this.yCoef;
                    this.slideSet(this.handles.single, offset - this.size.handle / 2);
                }
            };
        }
        this.bubbles.min.onclick = () => {
            this.toMin();
        };
        this.bubbles.max.onclick = () => {
            this.toMax();
        };
        if (this.propsProxy.keyboard) {
            document.removeEventListener('click', this.clickFun);
            document.addEventListener('click', this.clickFun);
        }
    }
    static get observedAttributes() {
        return ['value', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = RangeElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (['disabled', 'readonly', 'value', 'name'].includes(name)) {
            this.inputEl[name] = this.propsProxy[name];
            if (name = 'value') {
            }
        }
        else if (['multiple', 'locked', 'limitshow', 'valshow', 'btnshow', 'rulershow', 'tips', 'keyboard'].includes(name)) {
            if (name === 'multiple') {
                if (newVal !== null) {
                    this.handles.single.remove();
                    this.handlesEl.append(this.handles.from, this.handles.to);
                }
                else {
                    this.handles.from.remove();
                    this.handles.to.remove();
                    this.handlesEl.appendChild(this.handles.single);
                }
            }
            if (name === 'limitshow') {
                if (newVal !== null) {
                    elState(this.bubbles.max).isVirtual && this.bubblesEl.append(this.bubbles.max, this.bubbles.min);
                }
                else {
                    this.bubbles.max.remove();
                    this.bubbles.min.remove();
                }
            }
            if (name === 'valshow') {
                if (newVal !== null) {
                    if (this.propsProxy.multiple) {
                        elState(this.bubbles.from).isVirtual && this.bubblesEl.append(this.bubbles.from, this.bubbles.to);
                    }
                    else {
                        elState(this.bubbles.single).isVirtual && this.bubblesEl.appendChild(this.bubbles.single);
                    }
                }
                else {
                    this.bubbles.from.remove();
                    this.bubbles.to.remove();
                    this.bubbles.single.remove();
                }
            }
            if (name === 'btnshow') {
                if (newVal !== null) {
                    if (elState(this.decrEl).isVirtual) {
                        this.wrapEl.insertAdjacentElement('afterBegin', this.decrEl);
                        this.wrapEl.insertAdjacentElement('beforeEnd', this.incrEl);
                    }
                }
                else {
                    this.decrEl.remove();
                    this.incrEl.remove();
                }
            }
            if (name === 'rulerhow') {
                if (newVal !== null) {
                    (elState(this.rulerEl).isVirtual) && this.bodyEl.appendChild(this.rulerEl);
                }
                else {
                    this.rulerEl.remove();
                }
            }
        }
        else if (name === 'tips') {
            if (newVal !== null) {
                elState(this.tipsEl).isVirtual && this.appendChild(this.tipsEl);
            }
            else {
                this.tipsEl.remove();
            }
        }
        else if (['max', 'min'].includes(name)) {
            if (newVal) {
                this.tipsEl.innerHTML = renderTpl(config.lang.form.range, { min: this.propsProxy.min, max: this.propsProxy.max });
                name === 'max' && (this.bubbles.max.innerHTML = newVal);
                name === 'min' && (this.bubbles.min.innerHTML = newVal);
            }
            else {
                name === 'max' && (this.bubbles.max.innerHTML = '100');
                name === 'min' && (this.bubbles.min.innerHTML = '0');
            }
        }
        else if (name === 'result') {
            if (newVal) {
                this.resultEl.innerHTML = renderTpl(newVal, { min: this.propsProxy.min, max: this.propsProxy.max, value: this.propsProxy.value });
                elState(this.resultEl).isVirtual && this.wrapEl.appendChild(this.resultEl);
            }
            else {
                this.resultEl.remove();
            }
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        [...RangeElem.custAttrs, ...RangeElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        RangeElem.boolAttrs.forEach((k) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.value = this.getAttribute('value') || this.innerHTML;
        !this.propsRaw.max && (this.propsRaw.max = '100');
        !this.propsRaw.min && (this.propsRaw.min = '0');
        !this.propsRaw.axis && (this.propsRaw.axis = 'x');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    fillWrap(data) {
        this.wrapEl = createEl('div', { [alias]: 'wrap' });
        this.inputEl = createEl('input', { type: 'text', name: data.name, value: data.value });
        this.decrEl = createEl('i', { [alias]: 'decrease' }, 'minus');
        this.incrEl = createEl('i', { [alias]: 'increase' }, 'plus');
        this.bodyEl = createEl('div', { [alias]: 'body' });
        this.trackEl = createEl('div', { [alias]: 'track' });
        this.baseEl = createEl('div', { [alias]: 'base' });
        this.thumbEl = createEl('div', { [alias]: 'thumb' });
        this.handlesEl = createEl('div', { [alias]: 'handles' });
        this.handles.from = createEl('i', { [alias]: 'from' });
        this.handles.to = createEl('i', { [alias]: 'to' });
        this.handles.single = createEl('i', { [alias]: 'single' });
        this.bubbles.max = createEl('i', { [alias]: 'max' }, data.max);
        this.bubbles.min = createEl('i', { [alias]: 'min' }, data.min);
        this.bubbles.from = createEl('i', { [alias]: 'from' });
        this.bubbles.to = createEl('i', { [alias]: 'to' });
        this.bubbles.single = createEl('i', { [alias]: 'single' });
        this.bubbles.merge = createEl('i', { [alias]: 'merge' });
        this.bubblesEl = createEl('div', { [alias]: 'bubbles' }, this.bubbles.merge);
        this.resultEl = createEl('i', { [alias]: 'result' });
        this.tickEl = createEl('ul', { [alias]: 'tick' });
        this.rulerEl = createEl('div', { [alias]: 'ruler' }, this.tickEl);
        this.fenceEl = createEl('i', { [alias]: 'fence' });
        if (data.multiple) {
            this.handlesEl.append(this.handles.from, this.handles.to);
            this.bubblesEl.append(this.bubbles.from, this.bubbles.to);
        }
        else {
            this.handlesEl.append(this.handles.single);
            this.bubblesEl.append(this.bubbles.single);
        }
        this.trackEl.append(this.baseEl, this.thumbEl);
        this.bodyEl.append(this.trackEl, this.handlesEl, this.bubblesEl);
        this.wrapEl.append(this.inputEl, this.bodyEl);
        console.log(config.lang.form.range);
        this.tipsEl = createEl('div', { [alias]: 'tips' }, renderTpl(config.lang.form.range, { min: data.min, max: data.max }));
    }
    correctValue(value) {
        let result = [];
        if (Array.isArray(value)) {
            let tmp = [...value.sort()];
            if (this.propsProxy.multiple) {
                result = tmp.length === 0 ? [...this.limitVals.max] :
                    tmp.length === 1 ? [...tmp, this.limitVals.max] : tmp.slice(0, 2);
            }
            else {
                result = tmp.length === 0 ? [this.limitVals.min] : tmp.slice(0, 1);
            }
        }
        else {
            result = value === null || value === '' ? [this.limitVals.min] : [value];
        }
        return result.map((k) => {
            return toNumber(clampVal({ value: parseFloat(k), ...this.limitVals }), { places: this.places });
        });
    }
    getSize() {
        let handle = (this.handles.single || this.handles.from).getBoundingClientRect()[this.attrsMap.size], track = this.trackEl.getBoundingClientRect()[this.attrsMap.size], min = this.bubbles.min ? this.bubbles.min.getBoundingClientRect()[this.attrsMap.size] : 0, max = this.bubbles.max ? this.bubbles.max.getBoundingClientRect()[this.attrsMap.size] : 0, fullRatio = (track - handle) / track, radiusRadio = (handle / 2) / track, maxProxy = parseFloat(this.propsProxy.max), minProxy = parseFloat(this.propsProxy.min), minRatio = ((this.limitVals.min - minProxy) / (maxProxy - minProxy)) * fullRatio, maxRatio = ((this.limitVals.max - minProxy) / (maxProxy - minProxy)) * fullRatio;
        this.size = {
            handle, track, ruler: 0,
            bubble: { min, max, from: 0, to: 0, single: 0 },
            ratio: { radius: radiusRadio, min: minRatio, max: maxRatio, full: fullRatio }
        };
    }
    getInitialValue() {
        let tmp = this.propsProxy.value.split(',').filter(Boolean).map((k) => parseFloat(k)).sort();
        this.initialValue = this.correctValue(tmp);
    }
    setHandleTow(type) {
        let offset = '';
        this.tows[type] = new Gesture(this.handles[type], {
            onStart: () => {
                offset = style(this.handles[type])[this.attrsMap.offset];
            },
            onMove: (e) => {
                e.orgEvt.stopPropagation();
                e.orgEvt.cancelable ? e.orgEvt.preventDefault() : null;
                this.slideSet(this.handles[type], parseFloat(offset) + e.diff[this.propsProxy.axis] * this.yCoef);
            },
            onEnd: () => {
                type !== 'single' ? this.tmpRatios = [...this.output.ratio] : null;
            }
        });
    }
    setHandleActive(el) {
        el.setAttribute('active', '');
        for (let k in this.handles) {
            this.handles[k] !== el ? this.handles[k].removeAttribute('active') : null;
        }
    }
    getLimitVals() {
        let max, min, maxProxy = parseFloat(this.propsProxy.max), minProxy = parseFloat(this.propsProxy.min), fence = this.propsProxy.fence.split(',').filter(Boolean).map((k) => parseFloat(k)).sort();
        if (fence[0] !== fence[1]) {
            if (fence[1] < minProxy) {
                max = min = minProxy;
            }
            else if (fence[0] > maxProxy) {
                max = min = maxProxy;
            }
            else if (fence[0] < minProxy && fence[1] > maxProxy) {
                min = minProxy;
                max = maxProxy;
            }
            else if (fence[0] < minProxy) {
                min = minProxy;
                max = fence[1];
            }
            else if (fence[1] > maxProxy) {
                min = fence[0];
                max = maxProxy;
            }
            else {
                min = fence[0];
                max = fence[1];
            }
        }
        else {
            min = minProxy;
            max = maxProxy;
        }
        this.limitVals = { min, max };
    }
    getRatioFromValue(value) {
        return ((value - parseFloat(this.propsProxy.min)) / (parseFloat(this.propsProxy.max) - parseFloat(this.propsProxy.min))) * this.size.ratio.full;
    }
    getValueFromRatio(ratio) {
        return ratio * (parseFloat(this.propsProxy.max) - parseFloat(this.propsProxy.min)) / this.size.ratio.full + parseFloat(this.propsProxy.min);
    }
    decrease(handleDiff = (this.output.value[1] - this.output.value[0])) {
        let value = (this.output.value[0] - ~~this.propsProxy.step);
        if (this.propsProxy.multiple) {
            value < ~~this.propsProxy.min ? value = ~~this.propsProxy.min : null;
            if (this.propsProxy.locked) {
                this.setValues([value, value + handleDiff]);
            }
            else {
                this.setValues([value, this.output.value[1]]);
            }
        }
        else {
            this.setValues(this.output.value - ~~this.propsProxy.step);
        }
        this.propsProxy.multiple ? this.tmpRatios = [...this.output.ratio] : null;
    }
    increase(handleDiff = (this.output.value[1] - this.output.value[0])) {
        let value = (this.output.value[1] + ~~this.propsProxy.step);
        if (this.propsProxy.multiple) {
            value > this.limitVals.max ? value = this.limitVals.max : null;
            if (this.propsProxy.locked) {
                this.setValues([value - handleDiff, value]);
            }
            else {
                this.setValues([this.output.value[0], value]);
            }
        }
        else {
            this.setValues(this.output.value + ~~this.propsProxy.step);
        }
        this.propsProxy.multiple ? this.tmpRatios = [...this.output.ratio] : null;
    }
    toMax(cb) {
        let value, diff;
        if (this.propsProxy.multiple) {
            diff = this.limitVals.max - this.output.value[1];
            value = [this.output.value[0] + diff, this.output.value[1] + diff];
        }
        else {
            value = this.limitVals.max;
        }
        this.setValues(value);
        super.listen({ name: 'toMax', cb, params: [value] });
        return this;
    }
    toMin(cb) {
        let value, diff;
        if (this.propsProxy.multiple) {
            diff = this.limitVals.min - this.output.value[0];
            value = [this.output.value[0] + diff, this.output.value[1] + diff];
        }
        else {
            value = this.limitVals.min;
        }
        this.setValues(value);
        super.listen({ name: 'toMin', cb, params: [value] });
        return this;
    }
    slideSet(el, value) {
        let result;
        if (el === this.thumbEl && this.propsProxy.multiple) {
            let fromRatio = this.tmpRatios[0] + value / this.size.track, diffRatio = this.tmpRatios[1] - this.tmpRatios[0], toRatio = fromRatio + diffRatio, from = this.getValueFromRatio(fromRatio), to = this.getValueFromRatio(toRatio), diff = this.getValueFromRatio(toRatio) - this.getValueFromRatio(fromRatio);
            if (this.propsProxy.locked) {
                if (from < this.limitVals.min) {
                    result = [this.limitVals.min, this.limitVals.min + diff];
                }
                else if (to > this.limitVals.max) {
                    result = [this.limitVals.max - diff, this.limitVals.max];
                }
                else {
                    result = [from, to];
                }
            }
            else {
                result = [from, to];
            }
        }
        else {
            let ratio = (value / this.size.track);
            if (el === this.handles.from) {
                if (ratio > this.output.ratio[1]) {
                    ratio = this.output.ratio[1];
                }
                else if (ratio < this.size.ratio.min) {
                    ratio = this.size.ratio.min;
                }
                result = [this.getValueFromRatio(ratio), this.output.value[1]];
            }
            else if (el === this.handles.to) {
                if (ratio > this.size.ratio.max) {
                    ratio = this.size.ratio.max;
                }
                else if (ratio < this.output.ratio[0]) {
                    ratio = this.output.ratio[0];
                }
                result = [this.output.value[0], this.getValueFromRatio(ratio)];
            }
            else if (el === this.handles.single) {
                if (ratio > this.size.ratio.max) {
                    ratio = this.size.ratio.max;
                }
                else if (ratio < this.size.ratio.min) {
                    ratio = this.size.ratio.min;
                }
                result = this.getValueFromRatio(ratio);
            }
        }
        this.setValues(result);
    }
    mergeTips() {
        if (this.size.thumb < (this.size.bubble.from + this.size.bubble.to) / 2) {
            this.classList.add(`${prefix}merge`);
        }
        else {
            this.classList.remove(`${prefix}merge`);
        }
    }
    hideEnds() {
        if (this.propsProxy.multiple) {
            let offsetFrom = this.output.ratio[0] * this.size.track, offsetTo = this.output.ratio[1] * this.size.track;
            if (offsetFrom < this.size.bubble.min + this.size.bubble.from / 2 - this.size.handle / 2) {
                this.classList.add(`${prefix}tostart`);
            }
            else {
                this.classList.remove(`${prefix}tostart`);
            }
            if (this.size.track - offsetTo < this.size.bubble.max + this.size.bubble.from / 2 + this.size.handle / 2) {
                this.classList.add(`${prefix}toend`);
            }
            else {
                this.classList.remove(`${prefix}toend`);
            }
        }
        else {
            let offsetSingle = this.output.ratio * this.size.track;
            if (offsetSingle < this.size.bubble.min + this.size.bubble.single / 2 - this.size.handle / 2) {
                this.classList.add(`${prefix}tostart`);
            }
            else {
                this.classList.remove(`${prefix}tostart`);
            }
            if (this.size.track - offsetSingle < this.size.bubble.max + this.size.bubble.single / 2 + this.size.handle / 2) {
                this.classList.add(`${prefix}toend`);
            }
            else {
                this.classList.remove(`${prefix}toend`);
            }
        }
    }
    setTicks() {
        if (this.propsProxy.rulershow) {
            let ceilValue = (parseFloat(this.propsProxy.max) - parseFloat(this.propsProxy.min)) / this.propsProxy.ruler.labels.split(',');
            this.size.ruler = this.rulerEl.getBoundingClientRect()[this.attrsMap.size];
            for (let k = 0; k <= this.propsProxy.ruler.majorEqual; k++) {
                let value = toNumber((this.propsProxy.min + ceilValue * k), { places: this.places }), content = this.propsProxy.ruler.labels.length > 0 ? this.propsProxy.ruler.labels[k] : value, offsetRatio = k / this.propsProxy.ruler.majorEqual, majorEl = createEl('li', { style: `${this.attrsMap.offset}:${offsetRatio * 100}%`, 'data-content': content });
                this.tickEl.appendChild(majorEl);
                majorEl.onclick = () => {
                    this.setValues(value);
                };
                this.ticks.push({
                    index: k,
                    dom: majorEl,
                    ratio: offsetRatio,
                    content: content,
                    value,
                });
                if (k !== this.propsProxy.ruler.majorEqual) {
                    this.setMinorTicks(offsetRatio);
                }
            }
            if (this.propsProxy.fence[0] !== this.propsProxy.fence[1]) {
                let fullSize = (this.propsProxy.max - this.propsProxy.min), sizeRatio = (this.propsProxy.fence[1] - this.propsProxy.fence[0]) / fullSize, offsetRatio = (this.propsProxy.fence[0] - this.propsProxy.min) / fullSize;
                this.fenceEl.style = `${this.attrsMap.size}:${sizeRatio * 100}%;${this.attrsMap.offset}:${offsetRatio * 100}%`;
                elState(this.fenceEl).isVirtual && this.rulerEl.appendChild(this.fenceEl);
            }
        }
    }
    setMinorTicks(offsetRatio) {
        let count = 0, unitRatio = 0, majorEqual = this.propsProxy.ruler.labels.split(',').length - 1, ceilSize = this.size.ruler / majorEqual;
        if (this.propsProxy.ruler.minorEqual === 'auto') {
            count = ceilSize < 40 ? 5 :
                (ceilSize >= 40 && ceilSize < 80) ? 6 :
                    (ceilSize >= 80 && ceilSize < 160) ? 7 :
                        (ceilSize >= 160 && ceilSize < 320) ? 8 :
                            (ceilSize >= 320 && ceilSize >= 640) ? 9 : 10;
        }
        else if (~~this.propsProxy.ruler.equal > 0) {
            count = ~~this.propsProxy.ruler.equal;
        }
        unitRatio = 1 / (count * majorEqual);
        for (let k = 0; k < count; k++) {
            this.tickEl.insertAdjacentHTML('beforeend', `<li style="${this.attrsMap.offset}:${(offsetRatio + unitRatio * k) * 100}%"></li>`);
        }
    }
    render() {
        this.insertAdjacentElement('afterbegin', this.wrapEl);
        /*     this.inputEl.addEventListener('change', (e: any) => {
                let val = e.target.checked ? 'ed' : '';
                this.setAttribute('check', val);
            }, false); */
    }
}
RangeElem.lazyAttrs = ['stor-name'];
RangeElem.custAttrs = [
    'class',
    'size', 'fence', 'name', 'max', 'min', 'step', 'hyphen', 'axis', 'result', 'labels', 'equal',
    'on-init', 'on-reset', 'on-clear', 'on-change', 'on-set', 'on-tomin', 'on-tomax', '', '', '',
];
RangeElem.boolAttrs = ['multiple', 'locked', 'limitshow', 'valshow', 'btnshow', 'rulershow', 'tips', 'keyboard', 'disabled', 'readonly'];
window.customElements.define("ax-range", RangeElem);
export default RangeElem;
