// Generated with util/create-component.js
import React, { memo } from "react";
import Heading from "../../UI/Heading";
import { MinusCircle, PlusCircle } from "../../UI/Icon";
import {
  ITitleWithEvaluationProps,
  TSentimentType,
} from "./TitleWithEvaluation.types";

export const scoreColorMap: { [key: number]: string } = {
  0: "#FF9900",
  1: "#FF9900",
  2: "#FFBC00",
  3: "#06DB75",
  4: "#36B7FF",
  5: "#256FFF",
};

const IconComponent = ({
  sentimentType,
}: {
  sentimentType: TSentimentType;
}) => {
  if (sentimentType === "positive") {
    return <PlusCircle size="1.2rem" className="mt-[0.6rem]" />;
  } else if (sentimentType === "negative") {
    return <MinusCircle size="1.2rem" className="mt-[0.6rem]" />;
  } else {
    return (
      <div className="mt-[1rem] h-[0.5rem] w-[0.5rem] rounded-full bg-black" />
    );
  }
};

const TitleWithEvaluation = ({
  titleKey,
  title,
  score,
  count,
  contentList,
}: ITitleWithEvaluationProps) => {
  const scoreColor =
    score >= 4
      ? scoreColorMap[Math.round(score)]
      : scoreColorMap[Math.floor(score)];

  return (
    <div
      data-testid="ContentsEditorTitleWithEvaluation"
      className="w-full p-[2rem] pb-0 pc:max-w-[80rem]"
    >
      <div className="flex items-center justify-between pb-[2rem]">
        <div className="flex space-x-[0.8rem]">
          <div className="mt-[0.3rem] flex h-[2.7rem] w-[2.7rem] flex-shrink-0 items-center justify-center bg-gray-10">
            <Heading level={5} className="text-white">
              {titleKey}
            </Heading>
          </div>

          <h3 className="whitespace-pre-wrap text-heading-4 font-extrabold text-gray-10 pc:text-heading-3">
            {title}
          </h3>
        </div>

        <div className="flex items-center">
          <div
            className="mr-[0.8rem] h-[1.2rem] w-[1.2rem] rounded-full"
            style={{
              backgroundColor: scoreColor,
            }}
          />

          <p
            className="mr-[0.2rem] text-body-8 font-bold"
            style={{
              color: scoreColor,
            }}
          >
            {score > 5 ? 5 : score}
          </p>

          <p className="text-body-10 text-gray-7">/5</p>
        </div>
      </div>

      {count > 0 && (
        <div className="mb-[2rem] space-y-[0.4rem]">
          {contentList.map(({ sentimentType, content }) => {
            return (
              <div
                key={`TitleWithEvaluation_${sentimentType}_${content}`}
                className="flex gap-x-[1rem]"
              >
                <IconComponent sentimentType={sentimentType} />

                <p className="whitespace-pre-wrap text-body-2 font-bold text-gray-10 pc:text-heading-6 pc:font-extrabold">
                  {content}
                </p>
              </div>
            );
          })}
        </div>
      )}

      <div className="h-[1px] w-full bg-gray-3" />
    </div>
  );
};

export default memo(TitleWithEvaluation);