<template>
  <button
    class="toggle-icon"
    :class="{ active: modelValue, disabled, small }"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
interface Props {
  modelValue?: boolean;
  disabled?: boolean;
  small?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  disabled: false,
  small: false,
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'click', event: MouseEvent): void;
}>();

const handleClick = (event: MouseEvent) => {
  if (!props.disabled) {
    const newValue = !props.modelValue;
    emit('update:modelValue', newValue);
    emit('click', event);
  }
};
</script>

<style lang="scss" scoped>
.toggle-icon {
  /* Default icon: align with field labels (--bms-font-color) */
  --icon-color: var(--bms-font-color);
  --underline-color: transparent;

  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  width: 34px;
  height: 34px;
  padding: 7px 0;

  :deep(svg) {
    color: var(--icon-color);
    transition: color 0.2s;
    width: 20px;
    height: 20px;
    display: block;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--underline-color);
    transition: background-color 0.2s;
  }

  &:hover:not(.disabled),
  &._hover:not(.disabled) {
    --icon-color: light-dark(var(--bms-grey-140), var(--bms-grey-25));
    --underline-color: light-dark(var(--bms-grey-140), var(--bms-grey-25));
  }

  &.active {
    --icon-color: var(--bms-main-100);
    --underline-color: var(--bms-main-100);
  }

  &.active:hover:not(.disabled),
  &.active._hover:not(.disabled) {
    --icon-color: light-dark(var(--bms-main-140), var(--bms-main-75));
    --underline-color: light-dark(var(--bms-main-140), var(--bms-main-75));
  }

  &.disabled {
    --icon-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
    cursor: default;
    pointer-events: none;
  }

  &.disabled.active {
    --underline-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
  }

  &.small {
    width: 24px;
    height: 24px;
    padding: 0.25em 0;

    :deep(svg) {
      width: 1em;
      height: 1em;
    }

    &::after {
      height: 1.5px;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 1em;
    }
  }
}
</style>
