<template>
  <div class="input-checkbox" :class="{ disabled, error }">
    <label>
      <input
        type="checkbox"
        :disabled="disabled"
        :name="name"
        v-model="inputValue"
        :value="value"
      />
      <span v-if="hasLabel" class="input-checkbox-info">
        <slot name="label">{{ label }}</slot>
      </span>
    </label>
  </div>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue';

export interface Props {
  modelValue: any;
  value?: any;
  name: string;
  label?: string;
  disabled?: boolean;
  error?: boolean;
  required?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  value: true,
  required: false,
  label: '',
  disabled: false,
  errors: () => [],
});

const slots = useSlots();

const $emits = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

const hasLabel = computed(() => slots.label || props.label);

const inputValue = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    $emits('update:modelValue', val);
  },
});
</script>

<style lang="scss" scoped>
.input-checkbox {
  --input-checkbox-default-color: var(--bms-grey-100);
  --input-checkbox-default-color-checked: var(--bms-main-100);
  --input-checkbox-default-background-color: transparent;

  width: fit-content;

  label {
    display: flex;
    gap: 4px;
  }

  &.error {
    --input-checkbox-default-color: var(--bms-danger-color);
    --input-checkbox-default-color-checked: var(--bms-danger-color);
  }

  &.disabled {
    --input-checkbox-default-color: var(--bms-grey-50);
    --input-checkbox-default-color-checked: var(--bms-grey-50);
    --input-checkbox-default-background-color: var(--bms-grey-25);
    pointer-events: none;
    input-checkbox-info {
      color: var(--bms-grey-50);
    }
  }

  &-info {
    line-height: 16px;
    cursor: default;
  }
}
input[type='checkbox'] {
  appearance: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--input-checkbox-default-color);
  border-radius: 2px;
  display: grid;
  place-content: center;
  background-color: var(--input-checkbox-default-background-color);

  &::before {
    content: '';
    width: 8px;
    height: 8px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--input-checkbox-default-color-checked);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  &:hover {
    border: 2px solid var(--input-checkbox-default-color-checked);
  }

  &:checked {
    border: 2px solid var(--input-checkbox-default-color-checked);
    background-color: transparent;

    &::before {
      transform: scale(1);
    }
  }
}
</style>
