import React, { useEffect, useState } from "react";
import { StarIcon } from "./assets/StarIcon";
import { IconProps } from "./assets/types";
import { RaitingProps, RaitingType } from "./types";
import classNames from "classnames";
import { palette } from "../../design-system/tokens";
import { CircleIcon } from "./assets/CircleIcon";
import styles from "./Raiting.module.scss";

export const Raiting: React.FC<RaitingProps> = React.memo(props => {
  const { items = 5, currentValue = 5, isEditable = false, type } = props;
  const [ratingArr, setArray] = useState<JSX.Element[]>(
    Array.from(Array(items).fill(<></>))
  );
  const [newRatingValue, setNewRatingValue] = useState<number>(currentValue);

  const IconMap: Record<RaitingType, React.FC<IconProps>> = {
    star: StarIcon,
    circle: CircleIcon,
  };

  const IconComponent = IconMap[type || "star"];

  // useEffect(() => {
  //   constructRaiting(currentValue, Array.from(Array(items).fill(<></>)));
  // }, [items, currentValue]);

  useEffect(() => {
    constructRaiting(currentValue);
  }, [currentValue, type]);

  useEffect(() => {
    constructRaiting(newRatingValue);
  }, [newRatingValue]);

  const changeDisplay = (raiting: number) => {
    if (!isEditable) {
      return;
    }
    constructRaiting(raiting);
  };

  const changeRaiting = (newRaiting: number) => {
    if (!isEditable) {
      return;
    }
    setNewRatingValue(newRaiting);
  };

  const handleSpace = (newRaiting: number, event: globalThis.KeyboardEvent) => {
    if (event.code !== "Space") {
      return;
    }
    setNewRatingValue(newRaiting);
  };

  const constructRaiting = (
    currentRaiting: number,
    ratingArray?: JSX.Element[]
  ) => {
    if (!ratingArray) {
      ratingArray = ratingArr;
    }
    const updateArray: Array<JSX.Element> = ratingArray.map((starItem, i) => (
      <IconComponent
        borderColor={
          i < currentRaiting ? palette.orangeNormal : palette.greyNormalLight
        }
        onMouseEnter={() => changeDisplay(i + 1)}
        onMouseLeave={() => changeDisplay(newRatingValue)}
        onClick={() => changeRaiting(i + 1)}
        onKeyDown={(event: globalThis.KeyboardEvent) =>
          isEditable === true && handleSpace(i + 1, event)
        }
        tabIndex={isEditable ? 0 : -1}
        key={i}
        className={classNames(styles["star"], {
          [styles["fill"]]: i < currentRaiting,
        })}
      />
    ));

    setArray(updateArray);
  };

  return (
    <div
      className={classNames(styles["raiting"], {
        [styles["isEditable"]]: isEditable,
      })}
    >
      {ratingArr.map((r, i) => (
        <span key={i}>{r}</span>
      ))}
    </div>
  );
});