<script>
export default {
  name: 'DoubleSwitch',
  components: {
    // Button,
  },
  props: {
    machine: {
      type: Object,
      default: () => ({})
    },
    firstTitle: {
      type: String,
      default: ''
    },
    secondTitle: {
      type: String,
      default: ''
    },
    firstColor: {
      type: String,
      default: ''
    },
    secondColor: {
      type: String,
      default: ''
    },
    isCheck: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'row'
    },
    labelClass: {
      type: String,
      default: ''
    },
    switchClass: {
      type: String,
      default: ''
    },
  },
  emits: ['switched'],
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
  },
  watch: {
    isCheck: function () {
      this.isChecked = !this.isChecked
    },
  },
  mounted () {
    
  },
  methods: {
    buttonClass: function(value) {
      return `border border-slate-400 flex items-center justify-center cursor-pointer rounded transition-all text-xs text-center py-[5px] px-2 ${value}`
    },
    setChecked(e) {
      this.$emit('switched', e.target.checked)
    }
  }
}
</script>

<template>
  <label :class="`${position === 'row' ? 'flex-row' : 'flex-col'} ${labelClass} relative flex items-center cursor-pointer`">
    <input
      v-bind="$attrs"
      class="input sr-only peer/checkbox"
      type="checkbox"
      :checked="isCheck"
      @change="setChecked"
    >
    <span
      v-if="position === 'col'"
      class="block peer-checked/checkbox:hidden ml-0 text-xs font-medium text-gray-900 dark:text-gray-300"
    > {{ firstTitle }}</span>
    <span
      v-if="position === 'col'"
      class="hidden peer-checked/checkbox:block ml-0 text-xs font-medium text-gray-900 dark:text-gray-300"
    > {{ secondTitle }} </span>
    <div
      :class="`${switchClass} relative w-11 h-6 rounded-full peer peer-focus:ring-4 peer-focus:ring-${secondColor}-300 dark:peer-focus:ring-${secondColor}-800 dark:bg-${firstColor}-700 peer-checked/checkbox:after:translate-x-full peer-checked/checkbox:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-${firstColor}-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-${firstColor}-600`"
      :style="{background: !isCheck ? firstColor : secondColor}"
    />
    <span
      v-if="position === 'row'"
      class="block peer-checked/checkbox:hidden ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
    > {{ firstTitle }}</span>
    <span
      v-if="position === 'row'"
      class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
    > {{ secondTitle }} </span>
  </label>
</template>