<template>
  <div class="cpSegmentedControlItem" :class="dynamicSegmentedControlItemClasses">
    <input
      :id="option.value"
      v-model="selectedValue"
      class="cpSegmentedControlItem__input"
      :disabled="isDisabled"
      :name="name"
      type="radio"
      :value="option.value"
    />
    <label class="cpSegmentedControlItem__inner" :for="option.value">
      <cp-icon v-if="option.leadingIcon" class="cpSegmentedControlItem__icon" size="16" :type="option.leadingIcon" />
      <span class="cpSegmentedControlItem__label">{{ option.label }}</span>
      <cp-icon v-if="option.trailingIcon" class="cpSegmentedControlItem__icon" size="16" :type="option.trailingIcon" />
    </label>
  </div>
</template>

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

import { capitalizeFirstLetter } from '@/helpers'

interface Option {
  label: string
  leadingIcon?: string
  trailingIcon?: string
  value: string
}

interface Props {
  isDisabled?: boolean
  isFullWidth?: boolean
  isInvalid?: boolean
  isSelected?: boolean
  name: string
  option: Option
  orientation?: 'horizontal' | 'vertical'
  size?: 'sm' | 'md'
}

const props = withDefaults(defineProps<Props>(), {
  orientation: 'horizontal',
})

const selectedValue = defineModel<string | undefined>()

const dynamicSegmentedControlItemClasses = computed(() => ({
  'cpSegmentedControlItem--isDisabled': props.isDisabled,
  'cpSegmentedControlItem--isInvalid': props.isInvalid,
  'cpSegmentedControlItem--isSelected': props.isSelected,
  'cpSegmentedControlItem--fullWidth': props.isFullWidth && props.orientation !== 'vertical',
  [`cpSegmentedControlItem--${props.size}`]: props.size,
  [`cpSegmentedControlItem--is${capitalizeFirstLetter(props.orientation)}`]: true,
}))
</script>

<style scoped lang="scss">
.cpSegmentedControlItem {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  border-width: fn.px-to-rem(1) 0;
  border-style: solid;
  border-color: var(--cp-border-soft);
  background-color: var(--cp-background-primary);
  color: var(--cp-text-secondary);
  font-weight: 500;
  transition:
    background-color 100ms ease,
    border-color 100ms ease,
    box-shadow 100ms ease,
    color 100ms ease;

  &--fullWidth {
    width: 100%;
  }

  &--lg &__inner {
    padding: fn.px-to-rem(13) var(--cp-spacing-xl);
  }

  &--md &__inner {
    padding: fn.px-to-rem(9) var(--cp-spacing-xl);
  }

  &--sm &__inner {
    padding: calc(var(--cp-spacing-sm-md) - 1px) var(--cp-spacing-xl);
  }

  &:first-child {
    border-radius: var(--cp-radius-md) 0 0 var(--cp-radius-md);
    border-left-width: fn.px-to-rem(1);
  }

  &:last-child {
    border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0;
    border-right-width: fn.px-to-rem(1);
  }

  &:has(.cpSegmentedControlItem__input:focus-visible) {
    z-index: 4;
    border-color: var(--cp-border-accent-solid);
    background-color: var(--cp-background-accent-secondary-hover);
    box-shadow: var(--cp-shadow-focus-ring-accent);
    color: var(--cp-foreground-accent-primary-hover);
  }

  &--isInvalid:has(.cpSegmentedControlItem__input:focus-visible) {
    border-color: var(--cp-border-error-solid);
    background-color: var(--cp-background-error-secondary-hover);
    box-shadow: var(--cp-shadow-focus-ring-error);
    color: var(--cp-text-error-primary-hover);
  }

  &:has(.cpSegmentedControlItem__input:disabled) {
    background-color: var(--cp-background-primary);
    color: var(--cp-text-disabled);
  }

  &:has(.cpSegmentedControlItem__input:disabled) > .cpSegmentedControlItem__inner {
    cursor: not-allowed;
  }

  &--isSelected:not(:has(.cpSegmentedControlItem__input:is(:focus-visible, :disabled))) {
    background-color: var(--cp-background-accent-secondary);
    color: var(--cp-text-accent-primary);
  }

  &--isSelected.cpSegmentedControlItem--isInvalid:not(:has(.cpSegmentedControlItem__input:is(:focus-visible, :disabled))) {
    background-color: var(--cp-background-error-secondary);
    color: var(--cp-text-error-primary);
  }

  &:hover:not(.cpSegmentedControlItem--isSelected, :has(.cpSegmentedControlItem__input:disabled)) {
    border-color: var(--cp-border-soft-hover);
    background-color: var(--cp-background-primary-hover);
    color: var(--cp-text-secondary-hover);
  }

  &--isSelected:not(:has(.cpSegmentedControlItem__input:disabled)) {
    border-color: var(--cp-border-accent-solid);
  }

  &--isSelected:has(.cpSegmentedControlItem__input:disabled) {
    background-color: var(--cp-background-disabled);
  }

  &--isSelected:hover:not(:has(.cpSegmentedControlItem__input:is(:disabled, :focus-visible))) {
    border-color: var(--cp-border-accent-solid);
    background-color: var(--cp-background-accent-secondary-hover);
    color: var(--cp-text-accent-primary-hover);
  }

  &--isSelected.cpSegmentedControlItem--isInvalid:hover:not(:has(.cpSegmentedControlItem__input:is(:disabled, :focus-visible))) {
    background-color: var(--cp-background-error-secondary-hover);
    color: var(--cp-text-error-primary);
  }

  &--isInvalid {
    border-color: var(--cp-border-error-solid);

    &:hover:not(.cpSegmentedControlItem--isSelected, :has(.cpSegmentedControlItem__input:disabled)) {
      border-color: var(--cp-border-error-solid);
      background-color: var(--cp-background-error-secondary-hover);
    }

    &.cpSegmentedControlItem--isSelected:not(:has(.cpSegmentedControlItem__input:disabled)) {
      border-color: var(--cp-border-error-solid);
    }
  }

  &--isDisabled {
    border-color: var(--cp-border-disabled);

    &.cpSegmentedControlItem--isSelected {
      color: var(--cp-text-disabled);
    }

    &.cpSegmentedControlItem--isInvalid {
      border-color: var(--cp-border-disabled);
    }
  }

  &--isVertical {
    width: 100%;
    border-width: 0 fn.px-to-rem(1);

    &:first-child {
      border-radius: var(--cp-radius-md) var(--cp-radius-md) 0 0;
      border-top-width: fn.px-to-rem(1);
      border-right-width: fn.px-to-rem(1);
      border-left-width: fn.px-to-rem(1);
    }

    &:last-child {
      border-radius: 0 0 var(--cp-radius-md) var(--cp-radius-md);
      border-right-width: fn.px-to-rem(1);
      border-bottom-width: fn.px-to-rem(1);
      border-left-width: fn.px-to-rem(1);
    }

    &:not(:first-child, :last-child) {
      border-right-width: fn.px-to-rem(1);
      border-left-width: fn.px-to-rem(1);
    }
  }

  &__inner {
    display: flex;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--cp-text-size-sm);
    gap: var(--cp-spacing-md);
    line-height: var(--cp-line-height-sm);
  }

  &__input {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
    inset: 0;

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

  &__label {
    @extend %u-text-ellipsis;

    min-width: 0;
  }

  &__icon {
    flex-shrink: 0;
  }
}
</style>
