<template>
  <div
    class="xb-switch"
    :class="[
    size ? 'xb-switch--' + size : '',
    {
      'is-disabled': switchDisabled,
      'is-checked': checked 
    }]"
    role="switch"
    :aria-checked="checked"
    :aria-disabled="switchDisabled"
    @click.prevent="switchValue"
  >
    <input
      class="xb-switch__input"
      type="checkbox"
      @change="handleChange"
      ref="input"
      :id="id"
      :name="name"
      :true-value="activeValue"
      :false-value="inactiveValue"
      :disabled="switchDisabled"
      @keydown.enter="switchValue"
    />
    <span
      :class="['xb-switch__label', 'xb-switch__label--left', !checked ? 'is-active' : '']"
      v-show="(inactiveIcon || inactiveText) && !checked"
    >
      <i :class="[inactiveIcon]" v-if="inactiveIcon"></i>
      <span v-if="!inactiveIcon && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
    </span>
    <span class="xb-switch__core" ref="core"></span>
    <span
      :class="['xb-switch__label', 'xb-switch__label--right', checked ? 'is-active' : '']"
      v-show="(activeIcon || activeText) && checked"
    >
      <i :class="[activeIcon]" v-if="activeIcon"></i>
      <span v-if="!activeIcon && activeText" :aria-hidden="!checked">{{ activeText }}</span>
    </span>
  </div>
</template>
<script>
import emitter from 'xinbao-ui/src/mixins/emitter';
import Focus from 'xinbao-ui/src/mixins/focus';
import Migrating from 'xinbao-ui/src/mixins/migrating';

export default {
  name: 'XbSwitch',
  mixins: [Focus('input'), Migrating, emitter],
  inject: {
    xbForm: {
      default: ''
    }
  },
  props: {
    value: {
      type: [Boolean, String, Number],
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    activeIcon: {
      type: String,
      default: ''
    },
    inactiveIcon: {
      type: String,
      default: ''
    },
    activeText: String,
    inactiveText: String,
    activeColor: {
      type: String,
      default: ''
    },
    inactiveColor: {
      type: String,
      default: ''
    },
    activeValue: {
      type: [Boolean, String, Number],
      default: true
    },
    inactiveValue: {
      type: [Boolean, String, Number],
      default: false
    },
    name: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    },
    validateEvent: {
      type: Boolean,
      default: true
    },
    id: String
  },
  data() {
    return {

    };
  },
  created() {
    if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
      this.$emit('input', this.inactiveValue);
    }
  },
  computed: {
    checked() {
      return this.value === this.activeValue;
    },
    switchDisabled() {
      return this.disabled || (this.xbForm || {}).disabled;
    }
  },
  watch: {
    checked() {
      this.$refs.input.checked = this.checked;
      if (this.activeColor || this.inactiveColor) {
        this.setBackgroundColor();
      }
      if (this.validateEvent) {
        this.dispatch('XbFormItem', 'el.form.change', [this.value]);
      }
    }
  },
  methods: {
    handleChange(event) {
      const val = this.checked ? this.inactiveValue : this.activeValue;
      this.$emit('input', val);
      this.$emit('change', val);
      this.$nextTick(() => {
        this.$refs.input.checked = this.checked;
      });
    },
    setBackgroundColor() {
      let newColor = this.checked ? this.activeColor : this.inactiveColor;
      this.$refs.core.style.borderColor = newColor;
      this.$refs.core.style.backgroundColor = newColor;
    },
    switchValue() {
      !this.switchDisabled && this.handleChange();
    },
    getMigratingConfig() {
      return {
        props: {
          'on-color': 'on-color is renamed to active-color.',
          'off-color': 'off-color is renamed to inactive-color.',
          'on-text': 'on-text is renamed to active-text.',
          'off-text': 'off-text is renamed to inactive-text.',
          'on-value': 'on-value is renamed to active-value.',
          'off-value': 'off-value is renamed to inactive-value.',
          'on-icon-class': 'on-icon-class is renamed to active-icon.',
          'off-icon-class': 'off-icon-class is renamed to inactive-icon.'
        }
      };
    }
  },
  mounted() {
    if (this.activeColor || this.inactiveColor) {
      this.setBackgroundColor();
    }
    this.$refs.input.checked = this.checked;
  }
};
</script>
