import React, { memo, useEffect, useState } from "react";
import NrcNosearchPick from "../../NosearchPick";
import Button from "../../UI/Button";
import Heading from "../../UI/Heading";
import {
  BookmarkDefault,
  BookmarkPressed,
  Caret,
  ComparisonDefault,
  ComparisonPressed,
} from "../../UI/Icon";
import Text from "../../UI/Text";
import Link from "../../shared/Link";
import TextElement from "../Text";
import { IPickProductWithRadarChartProps } from "./PickProductWithRadarChart.types";

const PickProductWithRadarChart = ({
  titleKey,
  title,
  productData: {
    productId,
    parentCategory,
    productCategory,
    modelName,
    productName,
    brandName,
    thumbnailUrl,
    price,
    colors,
    pickType,
    scoreMetaMap,
    twoLineSummary,
    summary,
    scrapStatus,
    compareStatus,
    reviewAverage,
    reviewCount,
    onScrapButtonClick,
    onCompareButtonClick,
  },
  editorContent,
  showTitle = true,
  verticalProductInformation = true,
  showProductInformation = true,
  showActionButtonsOnInformation = true,
  showChart = true,
  showNosearchTwoLines = true,
  showSummary = false,
  showContent = true,
  defaultContentCollapsed = false,
  showRedirectDetailPageButton = true,
  redirectDetailPageButtonText = "더 자세한 리뷰 확인하기",
  showPurchaseOptionButton = false,
  purchaseOptionButtonText = "최저가 구매하기",
  showTipModalButton = false,
  tipModalText = "",
  onProductClick: handleProductClick,
  onPurchaseOptionButtonClick: handlePurchaseOptionButtonClick,
  onTipButtonClick: handleTipButtonClick,
  onSpecDetailButtonClick: handleSpecDetailButtonClick,
  NewTabLink,
  isMobile = true,
  PickProductV2Component,
}: IPickProductWithRadarChartProps) => {
  const encodedModelName = encodeURIComponent(modelName);

  const [isContentCollapsed, setIsContentCollapsed] = useState<boolean>(
    defaultContentCollapsed
  );

  useEffect(() => {
    setIsContentCollapsed(defaultContentCollapsed);
  }, [defaultContentCollapsed]);

  return (
    <div
      data-testid="ContentsEditorPickProductWithRadarChart"
      className="w-full max-w-[80rem] space-y-[2rem] p-[2rem] pb-[4rem] pc:pt-[3rem]"
    >
      {showTitle && (
        <div className="mb-[2rem] flex items-center justify-between">
          <div className="flex gap-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>

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

          {!showActionButtonsOnInformation && (
            <div className="flex items-center gap-x-[1.2rem]">
              {onScrapButtonClick && (
                <div
                  className={`cursor-pointer rounded-[1rem] border-[1px] p-[0.5rem] ${
                    scrapStatus ? "border-blue-4" : "border-gray-3"
                  }`}
                  onClick={onScrapButtonClick}
                >
                  {scrapStatus ? (
                    <BookmarkPressed size="2.4rem" />
                  ) : (
                    <BookmarkDefault size="2.4rem" />
                  )}
                </div>
              )}

              {onCompareButtonClick && (
                <div
                  className={`cursor-pointer rounded-[1rem] border-[1px] p-[0.5rem] ${
                    compareStatus ? "border-blue-4" : "border-gray-3"
                  }`}
                  onClick={onCompareButtonClick}
                >
                  {compareStatus ? (
                    <ComparisonPressed size="2.4rem" />
                  ) : (
                    <ComparisonDefault size="2.4rem" />
                  )}
                </div>
              )}

              <Button
                size="s"
                type="outline"
                color="gray"
                onClick={handleSpecDetailButtonClick}
              >
                <p className="text-body-9 text-gray-10">스펙 전체보기</p>
              </Button>
            </div>
          )}
        </div>
      )}

      <Link
        href={`/product/${parentCategory}/${productCategory}/detail/${encodedModelName}`}
        NewTabLink={NewTabLink}
      >
        <div
          onClick={(e) => {
            const target = e.target as HTMLElement;
            const tagName = target.tagName;
            const textContent = target.textContent;
            if (
              !handleProductClick ||
              tagName === "svg" ||
              tagName === "path" ||
              (tagName === "P" && textContent === "비교함")
            ) {
              return;
            }
            handleProductClick();
          }}
        >
          {showProductInformation &&
            (PickProductV2Component ?? (
              <NrcNosearchPick
                outlined
                vertical={verticalProductInformation}
                showScore={showChart}
                showReview={false}
                showActionButtonsOnInformation={showActionButtonsOnInformation}
                useBackgroundColorOnInformation={!verticalProductInformation}
                imageSize={verticalProductInformation ? "s" : "l"}
                showPickLabelOnImage
                brandNameClassName="text-body-10"
                goodsNameClassName={
                  isMobile
                    ? "text-heading-6 font-bold"
                    : "text-heading-5 font-extrabold"
                }
                modelNameClassName={
                  isMobile
                    ? "text-heading-6 font-bold"
                    : "text-heading-5 font-extrabold"
                }
                priceClassName={
                  isMobile ? "text-body-10" : "text-body-5 font-bold"
                }
                data={{
                  productId,
                  modelName,
                  price,
                  colors,
                  imageUrl: thumbnailUrl,
                  pickType,
                  goodsName: productName,
                  brandName,
                  scrapStatus,
                  compareStatus,
                  reviewAvg: reviewAverage,
                  reviewCnt: reviewCount,
                  scoreMetaMap,
                  onClickScrapButton: onScrapButtonClick,
                  onClickCompareButton: onCompareButtonClick,
                }}
                isMobile={isMobile}
              />
            ))}
        </div>
      </Link>

      <div className={isMobile ? "" : "pc:px-[2rem]"}>
        {showNosearchTwoLines && twoLineSummary !== "" && (
          <p
            className={`mb-[1.2rem] w-full whitespace-pre-wrap font-extrabold ${
              isMobile ? "text-[1.7rem] leading-[150%]" : "text-heading-5"
            }`}
          >
            {twoLineSummary}
          </p>
        )}

        <div
          className={`relative overflow-hidden transition-[max-height] duration-1000 ease-in-out ${
            isContentCollapsed
              ? isMobile
                ? "max-h-[10rem]"
                : "max-h-[15rem]"
              : "max-h-[1000rem]"
          }`}
        >
          {showSummary && summary !== "" && (
            <TextElement editorContent={summary} className="p-0 pt-[1.5rem]" />
          )}

          {showContent && (
            <TextElement
              editorContent={editorContent}
              className="p-0 pt-[1.5rem]"
            />
          )}

          {showTipModalButton && (
            <p
              className={`mt-[1.2rem] cursor-pointer text-blue-6 underline ${
                isMobile ? "text-body-4" : "text-body-1"
              }`}
              onClick={handleTipButtonClick}
            >
              {tipModalText}
            </p>
          )}

          <div
            className={`absolute bottom-0 w-full bg-gradient-to-t from-white ${
              isContentCollapsed ? "" : "hidden"
            } ${isMobile ? "h-[7rem]" : "h-[10rem]"}`}
          />
        </div>

        <button
          className={`flex w-full items-center justify-center ${
            isContentCollapsed ? "" : "hidden"
          }`}
          onClick={() => setIsContentCollapsed(false)}
        >
          <p className="mr-[0.4rem] text-body-2 font-bold">더보기</p>
          <Caret direction="down" size="2.4rem" />
        </button>

        <div
          className={`mt-[2rem] flex ${
            isMobile ? "gap-x-[1.5rem]" : "gap-x-[2rem]"
          }`}
        >
          {showPurchaseOptionButton && (
            <Button
              size="l"
              type="outline"
              color="blue"
              className="w-full"
              onClick={handlePurchaseOptionButtonClick}
            >
              <Text type="B8" className="text-blue-7">
                {purchaseOptionButtonText}
              </Text>
            </Button>
          )}

          {showRedirectDetailPageButton && (
            <Link
              href={`/product/${parentCategory}/${productCategory}/detail/${encodedModelName}`}
              NewTabLink={NewTabLink}
              className="w-full"
            >
              <Button
                size="l"
                type="cta"
                color="blue"
                className="w-full"
                onClick={handleProductClick}
              >
                <Text type="B8" className="text-white">
                  {redirectDetailPageButtonText}
                </Text>
              </Button>
            </Link>
          )}
        </div>
      </div>
    </div>
  );
};

export default memo(PickProductWithRadarChart);