import config from '../global/config';
import prefix from '../global/prefix';
import alias from '../global/alias';
import Tooltip from '../modules/Tooltip';
import createEl from '../utils/createEl';
import getAttrBool from '../utils/getAttrBool';
import PlainElem from './PlainElem';
class FormatElem extends PlainElem {
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = FormatElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'label' || name === 'type') {
            this.wrapEl.innerHTML = '';
            this.fillCont(this.propsProxy);
        }
        else if (name === 'rts' && this.propsProxy.type === 'ruby') {
            this.wrapEl.innerHTML = `<ruby>${this.getRuby(this.propsProxy.label, newVal)}</ruby>`;
        }
        else if (name === 'info' && (this.propsProxy.type === 'prefix' || this.propsProxy.type === 'suffix')) {
            this.infoEl.innerHTML = newVal;
        }
        else if (name === 'tips' && (this.propsProxy.type === 'prefix' || this.propsProxy.type === 'suffix')) {
            this.tipsIns.update(!newVal ? { asleep: true } : { asleep: false, content: newVal });
        }
        else if (name === 'lines' && this.propsProxy.type === 'break') {
            this.wrapEl.innerHTML = this.getBrText(this.propsProxy.label, ~~newVal, this.propsProxy.size);
        }
        else if (name === 'size' && this.propsProxy.type === 'break') {
            let tmp = this.wrapEl.firstElementChild;
            tmp ? tmp.style.fontSize = newVal : null;
        }
        else if (name === 'width' && this.propsProxy.type === 'break') {
            let tmp = this.wrapEl.firstElementChild;
            tmp ? tmp.style.width = newVal : null;
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        [...FormatElem.custAttrs, ...FormatElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        /*         FormatElem.boolAttrs.forEach((k: string) => {
                    this.propsRaw[k] = getAttrBool(this.getAttribute(k));
                }); */
        this.propsRaw.label = this.innerHTML || this.getAttribute('label');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    fillWrap(data) {
        this.wrapEl = createEl('div', { [alias]: 'wrap' });
        this.fillCont(data);
    }
    fillCont(data) {
        if (data.type === 'ruby') {
            this.wrapEl.innerHTML = `<ruby>${this.getRuby(data.label, data.rts)}</ruby>`;
        }
        else if (data.type === 'latex') {
            try {
                new Function(`label`, `el`, `${data.engin ? data.engin : 'katex.render(label, el)'}`)(data.label, this.wrapEl);
            }
            catch {
                console.error('Please introduce a math formula parsing plugin(katex)!');
            }
        }
        else if (data.type === 'prefix' || data.type === 'suffix') {
            this.infoEl = createEl('i', { [alias]: 'info' }, data.info);
            this.wrapEl.innerHTML = data.label;
            data.type === 'prefix' ? this.wrapEl.insertAdjacentElement('afterbegin', this.infoEl) : this.wrapEl.appendChild(this.infoEl);
            this.tipsIns = new Tooltip(this.infoEl, {
                content: data.tips,
                asleep: true,
            });
        }
        else if (data.type === 'break') {
            this.wrapEl.innerHTML = this.getBrText(data.label, data.lines, data.size);
        }
        else {
            this.wrapEl.innerHTML = data.label;
        }
    }
    render(data) {
        this.append(this.wrapEl);
    }
    getRuby(text, rts) {
        let result = '';
        if (!text) {
            return result;
        }
        if (!rts) {
            return text;
        }
        let chars = text.split(''), hyphen = text.includes(config.splitHyphen) ? config.splitHyphen : config.wordHyphen, rtArr = rts.split(hyphen);
        chars = chars.map((k, i) => {
            return `${k}<rt>${rtArr[i] || ''}</rt>`;
        });
        result = chars.join('');
        return result;
    }
    getBrText(text, lines = 2, size) {
        if (!text) {
            return '';
        }
        if (lines === 1 || !lines) {
            return text;
        }
        let points = Math.ceil(text.length / lines), fontSize = size ? 'style="font-size:' + size + '"' : '', result = `<i class="${prefix}t-br" ${fontSize}>`, hasBr = text.includes('<br') ? true : false;
        if (hasBr) {
            result += text;
        }
        else {
            for (let i = 0; i < lines; i++) {
                if (i === lines - 1) {
                    result += text.substring(i * points);
                }
                else {
                    result += text.substring(i * points, (i + 1) * points) + '<br/>';
                }
            }
        }
        return result + '</i>';
    }
}
FormatElem.lazyAttrs = ['stor-name'];
FormatElem.custAttrs = [
    'class',
    'type', 'rts', 'info', 'tips', 'lines', 'size', 'width',
    'on-init', 'on-reset', 'on-set',
];
FormatElem.boolAttrs = [];
window.customElements.define("ax-format", FormatElem);
export default FormatElem;
