<template>
    <label  class="checkbox">
        <input  type="checkbox" class="checkbox__input"  :checked="modelValue"  @change="updateInput"  :disabled="disableInput" >
        <div class="checkbox__state">
            <div class="checkbox__label">{{ label }}</div>
            <div :title="title" :style="{width: size.width, height: size.height}" class="checkbox__control">

              <svg class="checkbox__icon"  width="15px" height="13px">
                <use xlink:href="@/assets/images/sprite.svg#Checked"></use>
              </svg>

            </div>

        </div>
    </label>
</template>

<script>
import {mapState} from 'vuex';
export default {
    name: 'my-check-box',
    props:{
        modelValue:[Number,Boolean],
        label:{
            type:String,
            default: ''

        },
        exception:{
            type:Boolean,
            default:false
        },
      title:String,

        size:{
          type:Object,
          default:{width:'28px',
          height:'28px'}

        }

    },
    methods:{
        updateInput(event){
            let value=0;
            if(event.target.checked){
                value=1;
            }
           // console.log(value);
            this.$emit('update:modelValue',value)

        }
    },
  computed: {
    ...mapState({
      state_disableInput: state=>state.disableInput,
    }),
    disableInput(){
      if(this.state_disableInput && !this.exception){
        return true;
      }
      return false;
    },

  },



}
</script>

<style scoped>
.checkbox{
  display: inline-block;
  position: relative;

}

.checkbox__input{
  position: absolute;
  right: 0px;
    top: 0px;
  clip: rect(0,0,0,0);
}
.checkbox__state{
  display: flex;
  align-items: center;
  //gap:12px;
  cursor: pointer;
  user-select: none;

}
.checkbox__control{
  box-sizing: border-box;

  border: 1px solid var(--border-color);
  border-radius: 4px;



  display: flex;
  align-items: center;
  justify-content: center;

}
.checkbox__label{

  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  /* Gray 4 */
  color: #495057;


}
.checkbox__icon{
display: none;
color:#fff;
}

.checkbox__input:checked ~ .checkbox__state
.checkbox__icon{
  display: block;
}
.checkbox__input:checked ~ .checkbox__state
.checkbox__control{

  //background: #4263EB;
  //border-color: #4263EB;
}


.checkbox__input:focus ~ .checkbox__state
.checkbox__control{
  box-shadow: 0 0 1px 2px rgba(59, 153, 252, .7);
  /*box-shadow: 0 0 0 3px -moz-mac-focusring;*/
  /*color: #ffffff;*/
  outline: none;
}
</style>