import React, { useEffect, useMemo, useState } from "react";
import { getPriceString, isValidSpecValue } from "../../utils/functions";
import ColorChips from "../ColorChips";
import PickLabel from "../PickLabel";
import Score from "../Score";
import StarRating from "../StarRating";
import Button from "../UI/Button";
import Heading from "../UI/Heading";
import {
  BookmarkDefault,
  BookmarkPressed,
  ComparisonDefault,
  ComparisonPressed,
} from "../UI/Icon";
import Text from "../UI/Text";
import { NosearchPickProps } from "./NosearchPick.types";
import NosearchPickReview from "./NosearchPickReview";
import NosearchPickReviewSlider from "./NosearchPickReviewSlider";

const NosearchPick = ({
  data: {
    goodsName,
    modelName,
    brandName,
    productCategoryName,
    price,
    imageUrl,
    pickType,
    scrapStatus,
    compareStatus,
    reviewAvg,
    reviewCnt,
    reviews,
    colors,
    scoreMetaMap,
    onClickScrapButton,
    onClickCompareButton,
    onClickAllReviewsButton,
  },
  index,
  vertical = true,
  imageSize,
  outlined = true,
  showIndex = false,
  showScore = false,
  showReview = true,
  hideColors = false,
  showOnlyNosearchTwoLines = false,
  useBackgroundColorOnInformation = false,
  showActionButtonsOnInformation = true,
  useCategoryNameOnPickLabel = false,
  showPickLabelOnImage = false,
  brandNameClassName = "text-body-5 font-bold",
  goodsNameClassName = "text-body-5 font-bold",
  modelNameClassName = "text-body-5 font-bold",
  priceClassName = "text-body-10",
  Image,
  isMobile = true,
}: NosearchPickProps) => {
  const imageSizeMap = {
    s: "w-[12rem] h-[12rem]",
    l: "w-[12rem] h-[12rem] pc:w-[18rem] pc:h-[18rem]", // pick
  };
  const IMAGE_SIZE = imageSizeMap[imageSize];

  const [isLiked, setIsLiked] = useState<boolean>(scrapStatus);
  const [isCompared, setIsCompared] = useState<boolean>(compareStatus);

  const firstReview = useMemo(() => {
    return reviews === undefined || reviews.length === 0
      ? ""
      : reviews.filter((review) => review.type === "nosearch")[0]?.content ??
          "";
  }, [reviews]);

  useEffect(() => {
    setIsLiked(scrapStatus);
    setIsCompared(compareStatus);
  }, [scrapStatus, compareStatus]);

  return (
    <article
      data-testid="NosearchPick"
      className={`nrc--NosearchPick w-full flex-1 ${outlined &&
        "rounded-[10px] border-[1px] border-gray-3 p-[1.4rem]"}`}
    >
      <div className={`flex justify-between ${showReview && "mb-[1.2rem]"}`}>
        <div
          className={`flex items-center gap-x-[2rem] ${
            vertical ? "flex-col" : "justify-between"
          }`}
        >
          <div
            className={`flex ${useBackgroundColorOnInformation &&
              "rounded-[10px] bg-gray-1 py-[1rem] px-[2rem] pc:w-[40rem]"}`}
          >
            {/* image */}
            <div className="mr-[1.2rem] pc:mr-[1.6rem]">
              <div
                className={`relative rounded-[10px] border-[1px] border-gray-3 object-contain ${IMAGE_SIZE} overflow-hidden bg-white `}
              >
                {Image ? (
                  <Image
                    src={imageUrl}
                    layout="responsive"
                    objectFit="contain"
                    width={0}
                    height={0}
                    alt={`nosearchPick_${brandName}_${modelName}_${goodsName}`}
                  />
                ) : (
                  <img
                    src={imageUrl}
                    alt={`nosearchPick_${brandName}_${modelName}_${goodsName}`}
                  />
                )}

                {showPickLabelOnImage && (
                  <div className="absolute left-0 top-0">
                    <PickLabel
                      type="label"
                      pickType={pickType}
                      categoryKr={
                        useCategoryNameOnPickLabel ? productCategoryName : ""
                      }
                    />
                  </div>
                )}

                {showIndex && index && (
                  <div className="absolute top-0 left-0 flex h-[2.8rem] w-[2.8rem] items-center justify-center rounded-br-[10px] bg-gray-10 pc:h-[3rem] pc:w-[3rem]">
                    <Heading level={6} className="text-white pc:text-heading-5">
                      {index}
                    </Heading>
                  </div>
                )}
              </div>

              {!hideColors && colors && (
                <ColorChips
                  colors={colors ?? ""}
                  chipWidth="1.1"
                  chipHeight="1.1"
                  wrapperClassName="mt-[0.8rem] flex h-[1rem] items-center justify-center"
                />
              )}
            </div>

            {/* information */}
            <div className="flex flex-col justify-center">
              {!showPickLabelOnImage && (
                <div className="inline-block">
                  <PickLabel
                    type="label"
                    pickType={pickType}
                    categoryKr={
                      useCategoryNameOnPickLabel ? productCategoryName : ""
                    }
                    labelStyle="mb-[0.4rem]"
                  />
                </div>
              )}

              {isValidSpecValue(brandName) && (
                <p className={`break-all line-clamp-1 ${brandNameClassName}`}>
                  {brandName}
                </p>
              )}

              {isValidSpecValue(goodsName) && (
                <p className={`break-all line-clamp-1 ${goodsNameClassName}`}>
                  {goodsName}
                </p>
              )}

              {isValidSpecValue(modelName) && (
                <p className={`break-all line-clamp-1 ${modelNameClassName}`}>
                  {modelName}
                </p>
              )}

              <p className={`break-all line-clamp-2 ${priceClassName}`}>
                {getPriceString(price)}
              </p>

              {reviewAvg && reviewCnt ? (
                <div className="mt-[0.4rem]">
                  <StarRating
                    rating={reviewAvg}
                    text={
                      <Text type="D3" className="text-gray-6">
                        ({reviewCnt})
                      </Text>
                    }
                  />
                </div>
              ) : (
                ""
              )}
            </div>
          </div>

          {/* score - non vertical UI */}
          {!vertical && showScore && scoreMetaMap && (
            <div
              className={`flex-col justify-center ${
                isMobile ? "w-full" : "pc:w-[30rem]"
              }`}
            >
              <p
                className="mb-[1.6rem] text-body-5 font-bold"
                dangerouslySetInnerHTML={{
                  __html: firstReview,
                }}
              />

              <Score data={scoreMetaMap} />
            </div>
          )}
        </div>

        {/* Buttons */}
        {showActionButtonsOnInformation && (
          <div className="ml-[1rem] flex w-[4rem] flex-col items-center gap-y-[1rem]">
            {onClickScrapButton && (
              <Button
                type="icon"
                color={isLiked ? "blue" : "gray"}
                icon={
                  isLiked ? (
                    <BookmarkPressed size="2.4rem" />
                  ) : (
                    <BookmarkDefault size="2.4rem" />
                  )
                }
                onClick={(e) => {
                  if (e) {
                    e.preventDefault();
                  }
                  onClickScrapButton();
                }}
              />
            )}

            {onClickCompareButton && (
              <Button
                type="icon"
                color={isCompared ? "blue" : "gray"}
                icon={
                  isCompared ? (
                    <ComparisonPressed size="2.4rem" />
                  ) : (
                    <ComparisonDefault size="2.4rem" />
                  )
                }
                onClick={(e) => {
                  if (e) {
                    e.preventDefault();
                  }
                  onClickCompareButton();
                }}
              >
                <Text type="D3" className="whitespace-nowrap">
                  비교함
                </Text>
              </Button>
            )}
          </div>
        )}
      </div>

      {vertical && !showScore && showReview && <hr />}

      {/* score - vertical UI */}
      {vertical && showScore && scoreMetaMap && (
        <div className="mt-[1.2rem] border-t-[1px] border-gray-3 pt-[1.2rem]">
          <Score data={scoreMetaMap} />
        </div>
      )}

      {/* product reviews */}
      {showReview && reviews && reviews.length !== 0 && (
        <>
          {vertical ? (
            <div className="flex items-center">
              <div
                className={`scrollbar-hide flex w-full space-x-2 overflow-x-scroll pt-[1.2rem] pc:overflow-hidden`}
              >
                {showOnlyNosearchTwoLines ? (
                  <NosearchPickReview
                    review={
                      reviews.filter((review) => review.type === "nosearch")[0]
                    }
                    reviewCnt={1}
                  />
                ) : (
                  reviews.map((review, reviewIndex) => {
                    return (
                      <NosearchPickReview
                        key={`nsPick_review_${brandName}_${modelName}_${review.productId}_${reviewIndex}`}
                        review={review}
                        reviewCnt={reviews.length}
                      />
                    );
                  })
                )}

                {/* TODO: 전체보기 페이지 개발 전까지 주석 처리 */}
                {/* 홈 페이지에서 Mobile버전일 경우 */}
                {/* {reviews.length > 3 && (
                  <div
                    className="pc:hidden"
                    onClick={(e: React.MouseEvent) => {
                      e.preventDefault();
                      onClickAllReviewsButton && onClickAllReviewsButton();
                    }}
                  >
                    <Text
                      type="B2"
                      className="flex h-[8.6rem] w-[8.6rem] items-center justify-center rounded-full bg-blue-2 text-gray-10"
                    >
                      구매후기 <br /> 전체보기
                    </Text>
                  </div>
                )} */}
              </div>
            </div>
          ) : (
            <NosearchPickReviewSlider
              firstReview={firstReview}
              reviews={reviews}
              onClickAllReviewsButton={onClickAllReviewsButton}
            />
          )}
        </>
      )}
    </article>
  );
};

export default NosearchPick;