<template>
  <button
    :aria-disabled="disabled"
    :aria-pressed="isSelected"
    class="cpToggleButton"
    :class="dynamicClasses"
    :disabled="disabled"
    type="button"
    @click="handleClick"
  >
    <span class="cpToggleButton__leading">
      <slot name="leading">
        <cp-icon size="16" :type="leadingIcon" />
      </slot>
    </span>
    <span v-if="showLabel" class="cpToggleButton__label">
      <slot>
        {{ label }}
      </slot>
    </span>
  </button>
</template>

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

interface Props {
  disabled?: boolean
  isSelected?: boolean
  label?: string
  leadingIcon?: string
}

const props = withDefaults(defineProps<Props>(), {
  isSelected: false,
  disabled: false,
  label: '',
  leadingIcon: 'dashed-circle',
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const slots = useSlots()

const showLabel = computed(() => !!props.label || !!slots.default)

const dynamicClasses = computed(() => ({
  'cpToggleButton--isSelected': props.isSelected,
}))

const handleClick = (event: MouseEvent) => {
  emit('click', event)
}
</script>

<style lang="scss">
.cpToggleButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cp-spacing-lg);
  border-radius: var(--cp-radius-md);
  background-color: var(--cp-background-primary);
  box-shadow:
    var(--cp-shadows-3xs-inset),
    0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
  color: var(--cp-text-secondary);
  gap: var(--cp-spacing-md);
  transition:
    background-color 100ms ease-out,
    box-shadow 100ms ease-out,
    color 100ms ease-out,
    transform 100ms ease;

  &:focus-visible {
    box-shadow:
      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover),
      var(--cp-shadow-focus-ring-accent);
  }

  &:disabled {
    background-color: var(--cp-background-disabled);
    box-shadow:
      var(--cp-shadows-3xs-inset),
      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
    color: var(--cp-text-disabled);
    cursor: not-allowed;
  }

  &:hover:not(:disabled) {
    background-color: var(--cp-background-primary-hover);
    box-shadow:
      var(--cp-shadows-3xs-inset),
      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
    color: var(--cp-text-secondary-hover);
  }

  &:active:not(:disabled) {
    transform: scale3d(0.97, 0.97, 1);
  }

  &__leading {
    display: flex;
    align-items: center;
  }

  &__label {
    font-size: var(--cp-text-size-sm);
    font-weight: 500;
    line-height: var(--cp-line-height-sm);
  }

  &__defaultLeading,
  &__defaultLeading * {
    pointer-events: none;
  }

  &--isSelected:not(:disabled) {
    background-color: var(--cp-background-accent-secondary);
    box-shadow:
      var(--cp-shadows-3xs-inset),
      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
    color: var(--cp-text-accent-primary);

    &:hover {
      background-color: var(--cp-background-accent-secondary-hover);
      box-shadow:
        var(--cp-shadows-3xs-inset),
        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
      color: var(--cp-text-accent-primary-hover);
    }

    &:focus-visible {
      box-shadow:
        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid),
        var(--cp-shadow-focus-ring-accent);
    }
  }
}
</style>
