import * as Tools from '../tool'



var CN_CodeReg = /[\u4e00-\u9fa5\w]/ig;
var Clear_CN_CodeReg = /[^\u4e00-\u9fa5\w]/ig;



class TarcerElement {

    private handleDomListers: any[]
    private attrSelectFlag: string

    constructor() {
        this.attrSelectFlag = 'JG_tracer_xpaathFlag'
        this.handleDomListers = [];
        this.init()
    }


    private createXPath = (element) =>{
        const { attrSelectFlag } = this;
        //id
        if(element.id){
            return `//*[@id="${element.id}"]`
        }
        //body
        if(element.nodeName.toLowerCase() === 'body'){
            return `/html/${element.nodeName.toLowerCase()}`
        }
        if(!element.parentNode){
            return 'unkonw-parentNode';
        }
        var index = 1;
        var brotherList = element.parentNode.children 
        element.setAttribute(attrSelectFlag,true)
        for(var i=0,len=brotherList.length; i<len; i++){
            var item = brotherList[i]
            if(item.getAttribute(attrSelectFlag)){
                element.removeAttribute(attrSelectFlag)
                return `${this.createXPath(element.parentNode)}/${element.nodeName.toLowerCase()}${index>1?'['+index+']':''}`
            }else if(item.nodeName.toLowerCase() === element.nodeName.toLowerCase()){
                index++
            }
        }
    }

    private createTitle = (el) =>{
        var type = el.tagName.toLowerCase();
        var content = '';
        //获取内容
        if(el.outerText && CN_CodeReg.test(el.outerText)){
            content = el.outerText
            content = content.replace(Clear_CN_CodeReg,'')
        }else if(el.textContent && CN_CodeReg.test(el.textContent)){
            content = el.textContent.replace(Clear_CN_CodeReg,'')
        }else if(el.className !== ''){
            content = '.'+el.className
        }
        content = content.length > 30?(content.substring(0,20)+'...'):content
        return  type+':'+content;
    }   

    private handleElementEvent = (event)=>{
        let { target ,type } = event
        if(Tools.isEmptyArray(this.handleDomListers)){
            return false;
        }
        let title = this.createTitle(target);
        let xPath = this.createXPath(target);
        let value = type ==='change'? target.value:'';
        this.handleDomListers.forEach((handleHook)=>{
            let info = {
                title,
                xPath,
                value,
                target
            }
            handleHook(type,info)
        })
    }

    private init = () => {
        document.addEventListener('click',this.handleElementEvent)
        document.addEventListener('change',this.handleElementEvent)
    }


    public addElementActionListenr = (onHandleListener: (title, info) => any ) => {
        this.handleDomListers.push(onHandleListener)
    }

    public stopElementActionCatch = function(){
        document.removeEventListener('click',this.handleElementEvent)
        document.removeEventListener('change',this.handleElementEvent)
    }

    public resumeElementActionCatch = function(){
        this.init()
    }

}




export default TarcerElement