<template>
  <label
    class="checkbox_text"
    :class="[
      isDisabled && 'disabled'
    ]"
  >
    <input
      class="checkboxInput"
      type="checkbox"
      :checked="isChecked"
      :disabled="isDisabled"
      :name="name"
      @click="onChange"
    >
    <span class="checkboxLabel">
      {{ label }}
    </span>
  </label>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    name: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    onChange: {
      type: Function,
      default: function() {},
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    isChecked: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../const/variable.scss';

.checkboxLabel {
  margin: 0 5px;
}

/*Radio Check*/
label.checkbox_text {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 18px;
  line-height: 20px;
}
label.disabled {
  cursor: default;
  opacity: 0.4;
}

/** input **/
label.checkbox_text input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  margin: 0px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  outline: none;
  left: 0;
  padding: 0;
  display: block;

  &:before,
  &:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
  }

  &:before {
    width: 20px;
    height: 20px;
    left: 0px;
    top: 0;
    border: 1px solid palette(gray, base);
    border-radius: 5px;
    z-index: 3;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  }
  &:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    top: calc(50% - (((17px / 12) * 5) / 2));
    left: calc((20px / 2) - (((17px / 12) * 5) / 2));
    display: block;
    margin-top: calc(((17px / 12) * 5) * -1);
    width: calc(((17px / 12) * 5));
    height: 17px;
    z-index: 1;
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  }

  &:hover {
    &:before {
      border: 1px solid palette(blue, base);
    }
  }

  &:checked {
    box-shadow: none;
    &:before {
      border: 1px solid palette(blue, base);
    }
    &:after {
      border-right: 2px solid palette(blue, base);
      border-bottom: 2px solid palette(blue, base);
    }
  }
  &:disabled {
    z-index: 1;
  }
}
</style>
