<template>
  <label :for="name" class="checkbox-input" :title="label" :class="{ 'checkbox-input--disabled': disabled }">
    <input
      type="checkbox"
      :name="name"
      :id="name"
      :value="checkboxValue"
      v-model="checked"
      @change="onChange"
      class="checkbox-input__input"
      :disabled="disabled"
    >
    <span class="checkbox-input__label" v-if="label" v-text="label"></span>
  </label>
</template>

<script>
export default {
  name: 'checkbox-input',
  props: {
    name: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    checkboxValue: {
      type: [Number, String, Boolean],
      required: true,
    },
    value: {
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  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>
.checkbox-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 45px;
  margin-bottom: 4.5rem;
  cursor: pointer;
  &--disabled, &--preselected {
    pointer-events: none;
  }
  &__input {
    margin-right: 10px;
    margin-right: 1rem;
    width: 22px;
    height: 22px;
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    &:focus {
      outline: none;
    }
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content: '';
      width: 100%;
      height: 100%;
      transition: all transition(fast);
      
      background-repeat: no-repeat;
    }
    &:checked {
      &:not(:disabled) {
        &:before {
          background-image: url('./../../assets/images/icons/checkbox/checked.svg');
        }
      }
      &:disabled {
        &:before {
          background-image: url('./../../assets/images/icons/checkbox/checked_disabled.svg');
        }
      }
    }
    &:not(:checked) {
      &:not(:disabled) {
        &:before {
          background-image: url('./../../assets/images/icons/checkbox/unchecked.svg');
        }
      }
      &:disabled {
        &:before {
          background-image: url('./../../assets/images/icons/checkbox/unchecked_disabled.svg');
        }
      }
    }
  }
  &__label {
    @include body-small(medium, label, $color-black-primary, tertiary, quaternary);
    user-select: none;
    @include ellipsis()
  }
}
</style>

