import React, { useMemo, useState } from 'react';
import { IconRate } from '../../../assets/icons';
import { ContentIcon } from './styled';

interface RateProps {
  count: number;
  rating: number;
  color: {
    filled: string;
    unfilled: string;
  };
  size: string;
  noHover?: boolean;
  onRating?: (rating: number) => void;
}

export const Rate: React.FC<RateProps> = ({
  count,
  rating,
  color,
  size,
  noHover = false,
  onRating = () => {},
}) => {
  const [hoverRating, setHoverRating] = useState<number>(0);

  const getColor = (index: number): string => {
    if (hoverRating >= index || (!hoverRating && rating >= index)) {
      return color?.filled;
    }
    return color.unfilled;
  };

  const starRating = useMemo(() => {
    return (
      <ContentIcon>
        {Array(count)
          .fill(0)
          .map((_, i) => i + 1)
          .map((idx) => (
            <div
              key={idx}
              onClick={() => (onRating ? onRating(idx) : {})}
              onMouseEnter={() => (onRating ? !noHover && setHoverRating(idx) : {})}
              onMouseLeave={() => (onRating ? setHoverRating(0) : {})}
            >
              <IconRate color={getColor(idx)} size={size} />
            </div>
          ))}
      </ContentIcon>
    );
  }, [count, getColor, size, onRating, noHover]);

  return <div>{starRating}</div>;
};

Rate.defaultProps = {
  count: 5,
  rating: 0,
  color: {
    filled: '#ffbc00',
    unfilled: '#DCDCDC'
  },
};