<template>
  <!--<s-input-frame class="s-input" :stack-label="stackLabel" :float-label="floatLabel"  >-->
    <div
      class="q-toggle q-option cursor-pointer no-outline q-focusable row inline no-wrap items-center"
      :class="{disabled: disable, reverse: leftLabel}"
      v-touch-swipe.horizontal="__swipe"
      @click.stop.prevent="toggle"
      tabindex="0"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
      @keydown.space.enter.prevent="toggle(false)"
    >
      <div class="q-option-inner relative-position" :class="classes">
        <input
          type="checkbox"
          v-model="model"
          :value="val"
          :stack-label="stackLabel"
          :disabled="disable"
          @click.stop
          @change="__change"
        >
        <div class="q-focus-helper"></div>
        <div class="q-toggle-base"></div>
        <div class="q-toggle-handle shadow-1 row flex-center">
          <q-icon v-if="currentIcon" class="q-toggle-icon" :name="currentIcon"></q-icon>
          <div v-if="$q.theme !== 'ios'" ref="ripple" class="q-radial-ripple"></div>
        </div>
      </div>

      <span class="q-option-label" v-if="label" v-html="label"></span>
      <slot></slot>
    </div>
    <!--</s-input-frame>-->
</template>

<script>
import Mixin from '../checkbox/checkbox-mixin'
import OptionMixin from '../option-group/option-mixin'
import { QIcon } from '../icon'
import TouchSwipe from '../directives/touch-swipe'

export default {
  name: 's-toggle',
  components: {
    QIcon
  },
  directives: {
    TouchSwipe
  },
  mixins: [Mixin, OptionMixin],
  props: {
    icon: String,
    checkedIcon: String,
    uncheckedIcon: String,
    stackLabel: String,
    floatLabel: String
  },
  computed: {
    currentIcon () {
      return (this.isActive ? this.checkedIcon : this.uncheckedIcon) || this.icon
    }
  },
  methods: {
    __swipe (evt) {
      if (evt.direction === 'left') {
        this.unselect()
      }
      else if (evt.direction === 'right') {
        this.select()
      }
    }
  }
}
</script>
