import { FlexContainer } from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"
import * as S from "./styles"

type Marker = {
  position: number | "min"
  label?: string
}

const MARKERS: Marker[] = [
  { position: "min" },
  { position: 2, label: "2%" },
  { position: 25 },
  { position: 50, label: "17.5%" },
  { position: 75 },
  { position: 98, label: "35%" },
]

type SliderComponentProps = {
  sliderValue: number
  minSliderValue: number
  handleSliderChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

export default function SliderComponent({
  sliderValue,
  minSliderValue,
  handleSliderChange,
}: SliderComponentProps) {
  const { theme } = useThemeContext()

  const getMarkerColor = (position: number) =>
    sliderValue >= position ? theme.colors.gray100 : theme.colors.gray600

  return (
    <FlexContainer flexDirection="column" width={100}>
      <S.SliderMarkerContainer>
        {MARKERS.map(({ position, label }) => {
          const isMin = position === "min"
          return (
            <div key={position}>
              {label && (
                <S.MarkerText
                  color={theme.colors.gray400}
                  type="BODY_S"
                  style={{
                    left: `${isMin ? minSliderValue : position}%`,
                  }}
                >
                  {label}
                </S.MarkerText>
              )}
              <S.MarkerPointer
                bgColor={isMin ? theme.colors.error : getMarkerColor(position)}
                style={{
                  left: `${isMin ? minSliderValue : position}%`,
                }}
              />
            </div>
          )
        })}
      </S.SliderMarkerContainer>
      <S.SliderContainer>
        <S.SliderTrack value={sliderValue} />
        <S.StyledSlider value={sliderValue} onChange={handleSliderChange} />
      </S.SliderContainer>
    </FlexContainer>
  )
}