<template>
  <label class="cpRadioNew" :class="`cpRadioNew--${group.size}`" :for="radioId">
    <input
      :id="radioId"
      :aria-describedby="group.radioGroupHelperTextId"
      :aria-labelledby="group.radioGroupLabelId"
      :autofocus="group.autofocus"
      :checked="group.modelValue === option.value"
      :disabled="option.disabled"
      :name="group.groupName"
      type="radio"
      :value="option.value"
      @input="group.onChange(option.value)"
    />
    <span class="cpRadioNew__content">
      <span class="cpRadioNew__label">
        {{ option.label }}
        <span v-if="group.showRequired" class="cpRadioNew__required">*</span>
        <span v-else-if="group.showOptional" class="cpRadioNew__optional">(Optional)</span>
      </span>
      <span v-if="option.helperText" class="cpRadioNew__helperText">{{ option.helperText }}</span>
    </span>
  </label>
</template>

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

export interface RadioOption {
  disabled?: boolean
  helperText?: string
  label: string
  value: string
}

interface RadioGroupContext {
  autofocus: boolean
  groupName: string
  modelValue: string
  onChange: (value: string) => void
  radioGroudId: string
  radioGroupHelperTextId: string
  radioGroupLabelId: string
  showOptional: boolean
  showRequired: boolean
  size: 'md' | 'lg'
}

interface Props {
  option: RadioOption
}

const props = defineProps<Props>()

const group = inject<RadioGroupContext>('radioGroup')!

const getRadioId = (value: string): string => `${group.radioGroudId}-${value}`

const radioId = computed(() => getRadioId(props.option.value))
</script>

<style lang="scss">
.cpRadioNew {
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: var(--cp-spacing-md);

  &__label {
    display: flex;
    align-items: baseline;
    font-weight: 500;
    gap: var(--cp-spacing-sm);
  }

  &__helperText {
    color: var(--cp-text-secondary);
    font-weight: 400;
  }

  &__required {
    color: var(--cp-text-error-primary);
    font-family: Figtree, sans-serif;
    font-size: var(--cp-text-size-sm);
    font-weight: 700;
    line-height: var(--cp-line-height-sm);
  }

  &__optional {
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-xs);
    font-weight: 400;
    line-height: var(--cp-line-height-xs);
  }

  &--lg .cpRadioNew__optional {
    font-size: var(--cp-text-size-sm);
    line-height: var(--cp-line-height-sm);
  }

  &:not(:has(.cpRadioNew__helperText)) {
    align-items: center;
  }

  &:has(:disabled),
  &:has(:disabled) * {
    cursor: not-allowed;
  }
  
  &:has(:disabled) .cpRadioNew__helperText,
  &:has(:disabled) .cpRadioNew__label,
  &:has(:disabled) .cpRadioNew__optional {
    color: var(--cp-foreground-disabled);
  }

  &__content {
    display: flex;
    flex-direction: column;
    font-size: var(--cp-text-size-sm);
    line-height: var(--cp-line-height-sm);
  }

  &--lg .cpRadioNew__content,
  &--lg .cpRadioNew__required {
    font-size: var(--cp-text-size-md);
    line-height: var(--cp-line-height-md);
  }

  &--lg {
    input {
      width: var(--cp-dimensions-5);
      height: var(--cp-dimensions-5);
    }
  }

  input {
    width: var(--cp-dimensions-4);
    height: var(--cp-dimensions-4);
    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
    border-radius: var(--cp-radius-full);
    margin: var(--cp-spacing-sm);
    appearance: none;
    background-color: var(--cp-background-primary);
    box-shadow: var(--cp-shadows-3xs);
    transition:
      transform 0.1s linear,
      box-shadow 0.1s linear,
      background-color 0.1s linear;

    &:focus {
      box-shadow: var(--cp-shadow-focus-ring-accent);
    }

    &:checked {
      border-color: var(--cp-foreground-accent-primary);
      background-color: var(--cp-foreground-accent-primary);
    }

    &:hover:checked {
      background-color: var(--cp-foreground-accent-primary-hover);
    }

    &::before {
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: var(--cp-radius-full);
      background-color: var(--cp-background-primary);
      content: '';
      transform: scale(0);
      transition: transform 0.15s linear;
    }

    &:hover:not(:checked, :disabled) {
      background-color: var(--cp-background-primary-hover);
    }

    &:active:not(:disabled) {
      transform: scale(0.8);
    }

    &:checked::before {
      transform: scale(0.5);
    }

    &:checked:disabled {
      border-color: var(--cp-border-disabled);
      background-color: var(--cp-background-disabled);
    }

    &:checked:disabled::before {
      background-color: var(--cp-foreground-disabled);
    }
  }
}
</style>
