<template>
  <label
    :for="id"
    class="toggle">
    <input
      :id="id"
      :checked="checked"
      class="toggle__input"
      type="checkbox"
      @change.prevent="$emit('input', $event.target.checked)">
    <span class="toggle__toggle-wrapper">
      <span class="toggle__toggle"/>
    </span>
    <span class="toggle__label">{{ label }}</span>
  </label>
</template>

<script>
  export default {
    props: {
      label: {
        type: String,
        default: '',
      },
      checked: {
        type: Boolean,
        default: false,
      },
    },

    data() {
      return {
        id: null,
      };
    },
    mounted() {
      this.id = this._uid;
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .toggle {
    @include default-box-shadow;
    border-radius: $round-border-radius;
    border: 1px solid $color-silver;
    padding: $small-spacing $medium-spacing;
    display: flex;
    cursor: pointer;

    &__toggle-wrapper {
      background-color: $color-silver;
      width: 42px;
      height: 24px;
      border-radius: $round-border-radius;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 6px;
      margin-right: $small-spacing;
    }

    &__input {
      display: none;
    }

    &__input:checked + &__toggle-wrapper {
      background-color: $color-brand;
    }

    &__input:checked + &__toggle-wrapper &__toggle {
      margin-left: 14px;
    }

    &__toggle {
      width: 16px;
      height: 16px;
      border-radius: $round-border-radius;
      background-color: $color-white;
      margin-left: 0;
      transition: margin-left 0.5s;
    }

    &__label {
      @include regular-text;
    }
  }
</style>
