import {tpl} from './checkBoxTpl';
import classNames from 'classnames';
import "./checkBox.scss";
import MathUtil from "../../util/MathUtil";
const CheckBox = (($) => {
    const DefaultConfig = {
        className:"",       
        label:"",           
        value:null,
        selected:false,     
        disableInitialCallback: false,
        onChange:null,      
        disable:false,
        selectFilter:null,   
        onReady:null,
        onDomReady:null,
        beforeDispose:null,
    };
    class CheckBox {
        constructor(config) {
            this.__name = "CheckBox";
            this._config = this._getConfig(config);
            this.selected = this._config.selected;
            this._parent = this._config.node;
            this._$ui = null;
            this.id = MathUtil.getUID();
            this._isShown = false;
            this.initUI();
            const {onReady} = this._config;
            if(onReady){
                onReady(this._$ui);
            }
            this._addEvent();
            this.open();
            const {onDomReady} = this._config;
            if(onDomReady){
                onDomReady(this._$ui);
            }
            this.componentDidMount();
        }
        callback(selected){
            const {onChange, value} = this._config;
            if(onChange!=null){
                onChange(selected, value);
            }
        }
        componentDidMount() {
            const {disableInitialCallback} = this._config;
            if (!disableInitialCallback) {
                this.callback(this.selected);
            }
        }
        
        getSelected(){
            return this.selected;
        }
        getValue(){
            if(this._config){
                return this._config.value;
            }
            return null;
        }
        
        _getConfig(config) {
            return $.extend(true, {}, DefaultConfig, config);
        }
        
        initUI(){
            const {className, disable} = this._config;
            let itemClass = classNames('cd-check-box J_checkbox', className, {'cd-selected': this.selected}, {"cd-disable":disable});
            let renderData = {
                label:this._config.label || "",
                checkClass:itemClass
            }
            let renderText = template.render(tpl, renderData);
            this._$ui = $(renderText);
        }
        render(){
            if(this._$ui){
                if(this.selected){
                    if(this._$ui.hasClass("cd-selected") == false){
                        this._$ui.addClass("cd-selected");
                    }
                }
                else{
                    if(this._$ui.hasClass("cd-selected")){
                        this._$ui.removeClass("cd-selected");
                    }
                }
            }
        }
        
        _addEvent(){
            if(this._$ui){
                this._$ui.on("click", (event)=>{
                    const {value, selectFilter, disable} = this._config;
                    if(disable){
                        return;
                    }
                    let nextSelect = !this.selected;
                    let canSelect = true;
                    if(selectFilter && selectFilter(nextSelect, this.selected, value)==false){
                        canSelect = false;
                    }
                    if(canSelect){
                        this.selected = nextSelect;
                        this.render();
                        this.callback(this.selected);
                    }
                });
            }
        }
        open(){
            if(this._isShown==false){
                this._isShown = true;
                if(this._$ui && this._parent){
                    this._$ui.appendTo(this._parent);
                }
            }
        }
        close(flag = 0){
            if(this._$ui){
                this._$ui.remove();
            }
            this._isShown = false;
            this.dispose();
        }
        
        dispose() {
            const {beforeDispose} = this._config;
            if(beforeDispose){
                beforeDispose();
            }
            if(this._$ui){
                this._$ui.off();
            }
            this._$ui = null;
            this._parent = null;
            this._config = null;
        }
    }
    return CheckBox;
})($);
export default CheckBox;