import {radioTpl} from './radioButtonTpl';
import classNames from 'classnames';
import MathUtil from "../../util/MathUtil";
const RadioButton = (($) => {
    const DefaultConfig = {
        className:"",       
        label:"",           
        groupName:"",
        value:null,
        checked:false,
        onChange:null,      
        disabled:false,
        onReady:null,
        onDomReady:null,
        beforeDispose:null,
    };
    class RadioButton {
        constructor(config) {
            this.__name = "RadioButton";
            this._config = this._getConfig(config);
            this._parent = this._config.node;
            this.label = this._config.label;
            this.groupName = this._config.groupName;
            this._$ui = null;
            this._$radio = 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);
            }
        }
        callback(){
            const {onChange, value, label, groupName} = this._config;
            if(onChange!=null){
                onChange(value, label, groupName);
            }
        }
        setChangeCallback(cb){
            if(this._config){
                this._config.onChange = cb;
            }
        }
        
        _getConfig(config) {
            return $.extend(true, {}, DefaultConfig, config);
        }
        initUI(){
            const {className, disabled, groupName, label, value, checked} = this._config;
            let radioClass = classNames('cd-radio-button J_radioButton', className, {'cd-selected': checked}, {"cd-disabled":disabled});
            let renderData = {
                label:label,
                radioClass:radioClass,
                groupName:groupName,
                value:value,
            }
            let renderText = template.render(radioTpl, renderData);
            this._$ui = $(renderText);
            this._$radio = this._$ui.find(".J_radio");
            this.setChecked(checked);
            this._$radio.prop("disabled", disabled);
        }
        setChecked(checked){
            if(this._$radio){
                this._$radio.prop("checked", checked);
            }
        }
        getChecked(){
            if(this._$radio){
                return this._$radio.prop("checked");
            }
            return false;
        }
        getValue(){
            if(this._config){
                return this._config.value;
            }
            return null;
        }
        render(){
            if(this._$ui && this._$radio){
                if(this.getChecked()){
                    if(this._$ui.hasClass("cd-selected") == false){
                        this._$ui.addClass("cd-selected");
                    }
                }
                else{
                    if(this._$ui.hasClass("cd-selected")){
                        this._$ui.removeClass("cd-selected");
                    }
                }
                if(this._$radio.prop("disabled")){
                    if(this._$ui.hasClass("cd-disabled") == false){
                        this._$ui.addClass("cd-disabled");
                    }
                }
                else{
                    if(this._$ui.hasClass("cd-disabled")){
                        this._$ui.removeClass("cd-disabled");
                    }
                }
            }
        }
        
        _addEvent(){
            if(this._$radio){
                this._$radio.on("click", (event)=>{
                    const {disabled} = this._config;
                    if(disabled){
                        return;
                    }
                    this.render();
                    this.callback();
                });
            }
        }
        
        setDisabled(disabled){
            if(this._config.disabled!=disabled){
                this._config.disabled = disabled;
                if(this._$radio){
                    this._$radio.prop("disabled", disabled);
                }
                this.render();
            }
        }
        open(){
            if(this._isShown==false){
                this._isShown = true;
                if(this._$ui && this._parent){
                    this._$ui.appendTo(this._parent);
                }
            }
        }
        close(){
            if(this._$ui){
                this._$ui.remove();
            }
            this._isShown = false;
            this.dispose();
        }
        
        dispose() {
            const {beforeDispose} = this._config;
            if(beforeDispose){
                beforeDispose();
            }
            if(this._$radio){
                this._$radio.off();
            }
            this._$ui = null;
            this._$radio = null;
            this._config = null;
            this._parent = null;
        }
    }
    return RadioButton;
    
})($);
export default RadioButton;