<template>
  <label
    :class="[
      'app-checkbox',
      addClass,
      { switcher: switcher },
      { disabled: disabled },
      { validated: validated }
    ]"
  >
    <input
      class="app-checkbox-input"
      type="checkbox"
      :checked="checked"
      :disabled="disabled"
      :value="value"
      @change="handlerClick"
    />
    <span v-if="!switcher" class="app-checkbox-mark">
      <IconBase
        icon-name="checkbox"
        iconColor="rgba(0,0,0,0)"
        :width="10"
        :height="8"
        :viewBox="'0 0 10 8'"
      >
        <IconCheck />
      </IconBase>
    </span>
    <span v-if="switcher" class="app-checkbox-switch"></span>
    <span class="app-checkbox-label">
      <span class="app-checkbox-text">{{ label }}</span>
      <span class="app-checkbox-tooltip">
        <AppTooltip v-if="!!tooltip" :text="tooltip" />
      </span>
    </span>
  </label>
</template>

<script>
import { IconBase, IconCheck } from "../Icons/index";
import { AppTooltip } from "../UI";

export default {
  name: "app-checkbox",
  components: {
    IconBase,
    IconCheck,
    AppTooltip,
  },
  props: {
    validated: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    checked: { type: Boolean, default: false },
    switcher: { type: Boolean, default: false },
    label: { type: String, default: "" },
    tooltip: { type: String, default: "" },
    value: { type: String, default: "" },
    addClass: { type: String, default: "" },
  },
  emits: ["click"],
  methods: {
    handlerClick(e) {
      this.$emit("click", e.target.checked);
    },
  },
};
</script>

<style lang="sass" scoped>
@import "../assets/_vars"

.app-checkbox
  display: flex
  align-items: center
  position: relative
  padding-left: 24px
  margin-bottom: 6px
  cursor: pointer
  user-select: none
  font-size: 14px
  line-height: 16px
  &-label
    color: $gray3
  &-tooltip
    position: absolute
    margin-top: -2px
  &.switcher
    padding-left: 0
  &.disabled
    cursor: not-allowed
    .app-checkbox-mark
      opacity: 0.5
      pointer-events: none
      cursor: not-allowed
    .app-checkbox-label
      cursor: not-allowed
    .app-checkbox-text
      opacity: 0.5
      pointer-events: none
  input
    position: absolute
    opacity: 0
    cursor: pointer
    height: 0
    width: 0
    &:checked
      & ~ .app-checkbox-mark
        .app-icon-checkbox
          opacity: 1
      & ~ .app-checkbox-switch
        background: $green1
        &:hover
          background: $green2
        &::after
          left: auto
          right: 2px
  &:hover
    input
      & ~ .app-checkbox-mark
        border: 1px solid $green1
  .app-checkbox-mark
    .app-icon-checkbox
      opacity: 0
.app-checkbox-mark
  position: absolute
  top: 0
  left: 0
  display: flex
  align-items: center
  padding-left: 2px
  height: 16px
  width: 16px
  border-radius: 4px
  background-color: white
  border: 1px solid $gray5
  transition: all 00.3s ease
.app-icon-checkbox
  margin-bottom: 1px
  stroke: $green1
  transition: all 00.3s ease
.app-checkbox-switch
  position: relative
  display: inline-block
  top: 3px
  margin-right: 8px
  width: 32px
  height: 16px
  background: $gray1
  border-radius: 25px
  transition: all 00.3s ease
  &:hover
    background: $gray9
  &::after
    content: ''
    position: absolute
    top: 2px
    left: 2px
    width: 12px
    height: 12px
    border-radius: 50%
    background-color: white
</style>