<template>
  <label :for="name" class="switch-input" :aria-label="label">
    <input
      type="checkbox"
      :name="name"
      :id="name"
      class="switch-input__checkbox"
      v-model="checked"
      @change="onChange"
    >
    <span class="switch-input__slider"></span>
  </label>
</template>

<script>
export default {
  name: 'switch-input',
  props: {
    name: {
      type: String,
      required: true,
    },
    value: {
      required: true,
    },
    label: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      checkbox: false,
    }
  },
  computed: {
    checked: {
      get () {
        return this.value;
      },
      set (val) {
        this.checkbox = val;
      }
    },
  },
  methods: {
    onChange() {
      this.$emit('input', this.checkbox);
    }
  }
}
</script>

<style lang="scss" scoped>
.switch-input {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  width: 6rem;
  height: 3rem;
  perspective: 800px;
  margin-bottom: 20px;
  margin-bottom: 2rem;
  &__checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    &:checked + .switch-input__slider:before {
      background-color: $color-primary;
      transform: translate3d(150%, 0, 0);
    }
  }
  &__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $white;
    box-shadow: box-shadow(secondary);
    border-radius: border-radius(quaternary);
    &:before {
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      width: 2rem;
      height: 2rem;
      left: 4px;
      bottom: 4px;
      background-color: $color-grey-septenary;
      border-radius: border-radius(quinary);
      transition: all transition(fast);
    }
  }
}
</style>

