import React, { FC } from 'react'

import { theming } from '../../themes'
import { RatingButton, RatingType } from '../rating-button'
import { useStyles } from './styles'

export type RatingScaleProps = {
  value: number
  ratings?: RatingType[]
  ratingGradationInfo?: string[]
  onSelect: (rating: RatingType) => void
}

export const ratingScaleDefaultAnswers: RatingType[] = Array.from({ length: 5 }, (_, index) => ({
  key: `${index + 1}`,
  value: index + 1,
}))

const defaultProps = {
  ratings: ratingScaleDefaultAnswers,
  ratingGradationInfo: ['Strongly Disagree', 'Strongly Agree'],
}

export const RatingScale: FC<RatingScaleProps> = ({ value, ratings, ratingGradationInfo, onSelect }) => {
  const { ratingScaleWrapper, ratingScale, ratingGradationInfoWrapper, info } = useStyles({ theme: theming.useTheme() })

  const ratingButtons = ratings?.map((rating) => (
    <RatingButton key={rating.key} rating={rating} selected={value === rating.value} onClick={() => onSelect(rating)} />
  ))

  return (
    <div className={ratingScaleWrapper}>
      <div className={ratingScale}>{ratingButtons}</div>
      <div className={ratingGradationInfoWrapper}>
        {ratingGradationInfo && <h3 className={info}>{ratingGradationInfo[0]}</h3>}
        {ratingGradationInfo && <h3 className={info}>{ratingGradationInfo[1]}</h3>}
      </div>
    </div>
  )
}

RatingScale.defaultProps = defaultProps
