<script>

export default {
  name: 'DoubleSwitch',
  inject: ['isChecked'],
  props: {
    machine: {
      type: Object,
      default: () => ({})
    },
    firstTitle: {
      type: String,
      default: ''
    },
    secondTitle: {
      type: String,
      default: ''
    },
    firstColor: {
      type: String,
      default: ''
    },
    secondColor: {
      type: String,
      default: ''
    },
  },
  emits: ['switched'],
  computed: {
  },
  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="relative inline-flex items-center cursor-pointer">
    <input
      v-bind="$attrs"
      class="input sr-only peer/checkbox"
      type="checkbox"
      :checked="isChecked"
      @change="setChecked"
    >

    <div
      :class="`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: !isChecked ? firstColor : secondColor}"
    />
    <span class="block peer-checked/checkbox:hidden ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ firstTitle }}</span>
    <span class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ secondTitle }} </span>
  </label>
</template>

<style scoped>

</style>