import { ReactNode } from 'react'
import styled from 'styled-components'
import isRebrand from './is-rebrand.js'
import { classNames } from '@navinc/utils'

const FlowIcon = styled.div`
  display: inline-flex;
  background-color: ${({ theme }) => theme.scuttleGray400};
  border: 0.15em solid ${({ theme }) => theme.scuttleGray400};
  color: #fff;
  border-radius: 100%;
  aspect-ratio: 1/1;
  height: 1.6em;
  justify-content: center;
  align-items: center;

  &.active {
    border-color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    background-color: transparent;
  }

  &.complete {
    border-color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    color: #fff;
    background-color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
  }
`

const StepContainer = styled.div`
  width: 100%;
  text-align: center;
  color: ${({ theme }) => theme.scuttleGray400};

  &.complete,
  &.active {
    color: #000;
  }
`

const Content = styled.div`
  padding: 1em;
`

const IconStepContainer = styled.div`
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  // before and after elements are the lines connecting the dots. Default to 'incomplete' state
  &:before,
  &:after {
    flex-grow: 1;
    content: '';
    display: block;
    height: 0.15em;
    background: ${({ theme }) => theme.scuttleGray400};
  }

  &.complete {
    &:before,
    &:after {
      background: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    }
  }

  &.active:before {
    background: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
  }

  // hide line instead of removing so that it takes up the same space. This keeps the content centered consistently
  &.first:before {
    visibility: hidden;
  }

  // hide line instead of removing so that it takes up the same space. This keeps the content centered consistently
  &.last:after {
    visibility: hidden;
  }
`

const StyledStatusBar = styled.div`
  display: flex;
  flex-direction: row;
`

type FlowStep = {
  content?: ReactNode
}

export type NumericFlowStepsProps = {
  currentIndex: number
  steps: FlowStep[]
  className?: string
}

export default ({ currentIndex = 0, steps = [], className }: NumericFlowStepsProps) => {
  return (
    <StyledStatusBar className={className}>
      {steps.map((step, i) => {
        // eslint-disable-next-line no-nested-ternary
        const state = i === currentIndex ? 'active' : i > currentIndex ? 'incomplete' : 'complete'

        return (
          <StepContainer key={i} className={state}>
            <IconStepContainer className={classNames(state, { first: i === 0, last: i === steps.length - 1 })}>
              <FlowIcon className={state}>{i + 1}</FlowIcon>
            </IconStepContainer>
            <Content>{step.content}</Content>
          </StepContainer>
        )
      })}
    </StyledStatusBar>
  )
}