import styled from 'styled-components'
import { InferComponentProps } from './types'
import { ReactNode } from 'react'

type ComparisonScaleProps = InferComponentProps<typeof CompScaleContainer> & {
  /**
   * index of the selected option
   */
  selected: number
  /**
   * options in order of display (left to right)
   */
  options: string[]
}

const CompScaleContainer = styled.div`
  display: flex;
  flex-direction: row;
  gap: 0.1667em;
`
const CompScalePill = styled.div<{ $selected?: boolean }>`
  width: 100%;
  height: 0.5em;
  background: ${({ $selected, theme }) => ($selected ? theme.navPrimary400 : theme.navNeutral200)};
  border-radius: 50vh;
`
const CompScaleLabeled = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
`
const CompScaleLabel = styled.div`
  font-style: normal;
  font-weight: 400;
  font-size: 0.75em;
`
/**
 * Creates a 'progress bar' of given inputs.
 * Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
 * If equal to the index, the option label is displayed in text below the bar.
 */
export const ComparisonScale = styled(({ selected, options, ...props }: ComparisonScaleProps) => {
  return (
    <CompScaleContainer data-testid="comparison-scale" {...props}>
      {options?.map((optLabel, index) => (
        <CompScaleLabeled key={optLabel}>
          <CompScalePill $selected={index <= selected} />
          <CompScaleLabel>{(index === selected && optLabel) || '\u00A0'}</CompScaleLabel>
        </CompScaleLabeled>
      ))}
    </CompScaleContainer>
  )
})``

type ComparisonScaleWithInfoProps = InferComponentProps<typeof CompScaleWithInfoContainer> & {
  /**
   * index of the selected option
   */
  selected: number
  /**
   * options in order of display (left to right)
   */
  options: string[]
  /**
   * info to display over scale
   */
  info: ReactNode
}

const CompScaleWithInfoContainer = styled.div`
  display: flex;
  flex-direction: column;
  & > ${CompScaleContainer} {
    flex: 1;
    justify-content: flex-end;
  }

  height: 100%;
  flex-grow: 1;
`
const CompScaleInfo = styled.div`
  font-style: normal;
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.1667em;
  margin-bottom: 0.5em;
  flex-grow: 1;
`

/**
 * Creates a 'progress bar' of given inputs.
 * Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
 * If equal to the index, the option label is displayed in text below the bar.
 * Info is added as a head to the scale.
 */
export const ComparisonScaleWithInfo = styled(({ selected, options, info, ...props }: ComparisonScaleWithInfoProps) => {
  const argsInput = { selected, options }
  return (
    <CompScaleWithInfoContainer data-testid="comparison-scale-with-info" {...props}>
      <CompScaleInfo>{info}</CompScaleInfo>
      <ComparisonScale {...argsInput} />
    </CompScaleWithInfoContainer>
  )
})``