<template>
  <li :class="stepClasses" data-testid="pkt-step">
    <span class="pkt-step__line pkt-step__line--1" aria-hidden></span>
    <span class="pkt-step__line pkt-step__line--2" aria-hidden></span>
    <span class="pkt-step__indicator" v-html="statusSVG"> </span>
    <span class="pkt-step__line pkt-step__line--3" aria-hidden></span>
    <div class="pkt-step__wrapper">
      <div class="pkt-step__title">{{ title }}</div>
      <div class="pkt-step__content">
        <slot />
      </div>
    </div>
  </li>
</template>

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

export type TStepStatus = 'completed' | 'incomplete' | 'current'

interface IStepProps {
  title: string
  className?: string
  status: TStepStatus
}

const props = withDefaults(defineProps<IStepProps>(), {
  status: 'incomplete',
})

// Inject hideNonActiveStepsContent from parent Stepper component to access the variable
const hideNonActiveStepsContent = inject<boolean>('hideNonActiveStepsContent')
const shouldHideContent = (): boolean => {
  return hideNonActiveStepsContent && props.status !== 'current' ? true : false
}

const hideNonActiveSteps = inject<boolean>('hideNonActiveSteps')
const shouldHideStepTitleAndContent = (): boolean => {
  return hideNonActiveSteps && props.status !== 'current' ? true : false
}

const incompleteStepSVG =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" style="fill: var(--pkt-color-grays-grey-200, #CCC);" /></svg>'
const currentStepSVG =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859" /><circle cx="12" cy="12" r="6" fill="#2A2859" /></svg>'
const completedStepSVG =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#2A2859" d="M3 3h18v18H3z" /><path d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z" fill="#F1FDFF" /></svg>'

const stepClasses = computed(() => [
  'pkt-step',
  props.className,
  `pkt-step--${props.status}`,
  { 'pkt-step--hideContent': shouldHideContent() },
  { 'pkt-step--hideStep': shouldHideStepTitleAndContent() },
])

const statusSVG = computed(() => {
  switch (props.status) {
    case 'current':
      return currentStepSVG
    case 'completed':
      return completedStepSVG
    default:
      return incompleteStepSVG
  }
})
</script>

<style scoped lang="scss"></style>
