<template>
  <div
    :class="[
      cn.b(),
      cn.is('checked', checked),
      cn.is('invalid', invalid),
      cn.is('disabled', disabled),
      cn.is('focused', focused),
    ]"
    @click="handleChange"
  >
    <UiIconSCheck :class="[cn.e('checkmark')]" />

    <p :class="[cn.e('label')]">
      <slot v-bind="{ checked }">
        {{ label }}
      </slot>
    </p>
  </div>
</template>

<script setup lang="ts">
export interface Props {
  id: string
  label?: string
  disabled?: boolean
  modelValue?: boolean | string | number
  trueValue?: boolean | string | number
  falseValue?: boolean | string | number
  required?: boolean
}

defineOptions({
  name: 'CheckboxButton',
})

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  trueValue: true,
  falseValue: false,
  required: false,
  modelValue: undefined,
})
const slots = useSlots()
const { checked, invalid, focused, handleChange } = useCheckbox(props, slots)

const cn = useClassname('checkbox-button')
</script>

<style lang="scss">
.checkbox-button {
  $self: &;

  @include txt-i-m;

  --border-color: #{$clr-grey-300};
  --border-width: 1px;

  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 8px 16px;
  border-radius: 12px;
  outline: var(--border-width) solid var(--border-color);
  outline-offset: calc(var(--border-width) * -1);
  cursor: pointer;
  transition: .2s ease-out;
  transition-property: outline-color, background-color, color;
  user-select: none;

  &:hover {
    --border-color: transparent;

    background-color: $clr-grey-200;
  }

  &.is-checked {
    --border-color: transparent;

    background-color: $clr-cyan-500;
    color: $clr-white;

    &:hover {
      background-color: $clr-cyan-400;
    }
  }

  //&.is-invalid {
  //  --border-color: var(--checkbox-invalid-border-color);
  //}

  &.is-disabled {
    cursor: not-allowed;
  }

  &__checkmark {
    --border-color: var(--checkbox-border-color);
    --border-width: 1px;

    width: var(--size);
    height: var(--size);
    border-radius: 4px;
    outline: var(--border-width) solid var(--border-color);
    outline-offset: calc(var(--border-width) * -1);
    color: transparent;
    cursor: pointer;
    transition: .2s ease-out;
    transition-property: outline-color, background-color, color;
    margin-right: 8px;

    #{$self}.has-label & {
      margin-top: 1px;
    }

    #{$self}.is-checked & {
      --border-width: 0;

      color: var(--checkbox-checked-color);
      background-color: var(--checkbox-checked-background);
    }

    #{$self}.is-disabled & {
      --border-color: var(--checkbox-disabled-border-color);
    }

    #{$self}.is-disabled.is-checked & {
      color: var(--checkbox-disabled-checked-color);
    }
  }
}
</style>
