<template>
  <label
    :class="[
      {'ui-checkbox--disabled': disabled},
      {'ui-checkbox--error': error},
      {'ui-checkbox--right': right},
    ]"
    class="ui-checkbox"
  >
    <input
      :name="name"
      :checked="modelValue"
      class="ui-checkbox__input _visually-hidden"
      type="checkbox"
      v-bind="$attrs"
      @change="onChange"
    >
    <span class="ui-checkbox__check">
      <UiIcon
        class="ui-checkbox__check-icon"
        name="check"
        size="12"
      />
    </span>
    <span class="ui-checkbox__label">
      <slot/>
    </span>
    <span
      v-if="$slots.description"
      class="ui-checkbox__description"
    >
      <slot name="description"/>
    </span>
  </label>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean | undefined
  name?: string
  disabled?: boolean
  error?: boolean
  right?: boolean
}>();

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: boolean): void
  (eventName: 'update:error', value: boolean): void
}>();

function onChange(event: Event) {
  emit('update:modelValue', event.target?.checked);
  if (props.error) {
    emit('update:error', false);
  }
}
</script>

<style lang="scss">
.ui-checkbox {
  display: grid;
  align-items: start;
  column-gap: 8px;
  grid-template-columns: auto 1fr;

  @media (hover: hover) {
    cursor: pointer;

    &:is(:hover, :focus-visible) {
      opacity: 0.9;
    }
  }
}

.ui-checkbox__check {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid $checkbox-border;
  border-radius: 4px;
  color: $checkbox-color;

  @include from-br(sm) {
    cursor: pointer;
  }
}

.ui-checkbox__check-icon {
  opacity: 0;
}

.ui-checkbox__input:checked ~ .ui-checkbox__check {
  background-color: $checkbox-bg--checked;
  border-color: $checkbox-border--checked;
}

.ui-checkbox__input:checked ~ .ui-checkbox__check .ui-checkbox__check-icon {
  opacity: 1;
}

.ui-checkbox__label {
  @include font-sm;

  color: var(--checkbox-text, #{$checkbox-label});
  grid-column: 2;
  grid-row: 1;
  user-select: none;

  @include from-br(sm) {
    color: $checkbox-label--hover;
  }
}

.ui-checkbox__description {
  @include font-xs;

  font-weight: 400;
  grid-column: 2;
  grid-row: 2;
  user-select: none;
  color: $checkbox-description;
}

.ui-checkbox.ui-checkbox--disabled {
  user-select: none;
  pointer-events: none;
}

.ui-checkbox.ui-checkbox--disabled .ui-checkbox__check {
  border-color: $checkbox-border--disabled;
}

.ui-checkbox.ui-checkbox--disabled .ui-checkbox__label,
.ui-checkbox.ui-checkbox--disabled .ui-checkbox__description {
  color: $checkbox-text--disabled;
}

.ui-checkbox.ui-checkbox--error .ui-checkbox__check {
  border-color: $checkbox-border--error;
}

.ui-checkbox.ui-checkbox--right {
  grid-template-columns: 1fr auto;
}

.ui-checkbox.ui-checkbox--right .ui-checkbox__label {
  order: 1;
}

.ui-checkbox.ui-checkbox--right .ui-checkbox__check {
  order: 2;
}
</style>
