<template>
  <div
    :class="[
    `${$classPrefix}-switch-con`,
    {
      'disabled': disabled
    }
  ]"
    @click="toggle"
  >
    <input type="checkbox" v-model="computedValue" :value="localValue" ref="input" />
    <div :class="[
      `${$classPrefix}-switch`
    ]">
      <div :class="[
        `${$classPrefix}-switch__toggle`
      ]">
        <irbis-icon v-if="icon" :name="label" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IrbisSwitch",

  props: {
    value: [String, Number, Boolean],
    icon: Boolean,
    disabled: Boolean
  },

  data() {
    return {
      localValue: this.value
    };
  },

  watch: {
    value(value) {
      this.localValue = value;
    }
  },

  computed: {
    computedValue: {
      get() {
        return this.localValue;
      },
      set(value) {
        this.localValue = value;
        this.$emit("input", value);
      }
    },
    label() {
      return this.localValue ? "check" : "x";
    }
  },

  methods: {
    toggle() {
      this.$refs.input.click();
    }
  }
};
</script>