// Generated with util/create-component.js
import React, { memo, useEffect, useRef, useState } from "react";
import { getPriceString, isValidSpecValue } from "../../../utils/functions";
import Link from "../../shared/Link";
import Button from "../../UI/Button";
import { Caret } from "../../UI/Icon";
import { ISpareProductListProps } from "./SpareProductList.types";

const SpareProductList = ({
  mainTitle,
  parentCategory,
  productCategory,
  contentList,
  defaultCollapsed = false,
  Image,
  NewTabLink,
}: ISpareProductListProps<string>) => {
  const firstSpareProductRef = useRef<HTMLDivElement>(null);

  const [lengthOfContentList, setLengthOfContentList] = useState<number>(
    contentList.length
  );
  const [isCollapsed, setIsCollapsed] = useState<boolean>(
    lengthOfContentList > 1 && defaultCollapsed
  );

  useEffect(() => {
    setIsCollapsed(defaultCollapsed);
  }, [defaultCollapsed]);

  useEffect(() => {
    setLengthOfContentList(contentList.length);
  }, [contentList]);

  return (
    <div
      data-testid="ContentsEditorSpareProductList"
      className="w-full max-w-[80rem] px-[2rem] pt-[3rem] pb-[5rem] pc:pt-[4rem] pc:pb-[6rem]"
    >
      <div className="mb-[2rem] flex gap-x-[1rem]">
        <div className="text-heading-1 font-extrabold">*</div>
        <h5 className="mt-[0.2rem] whitespace-pre-wrap text-heading-5 font-extrabold text-gray-10 pc:text-heading-4">
          {mainTitle}
        </h5>
      </div>

      <div
        className="relative overflow-hidden transition-[max-height] duration-1000 ease-in-out"
        style={{
          maxHeight: isCollapsed
            ? firstSpareProductRef.current?.clientHeight
            : "1000rem",
        }}
      >
        <div className="space-y-[2.4rem]">
          {contentList.map(
            (
              {
                productTitle,
                content,
                modelName,
                goodsName,
                brandName,
                imageUrl = "./static/images/image_in_preparation.png",
                price,
              },
              index
            ) => {
              if (isCollapsed && index >= 1) {
                return;
              }

              if (
                parentCategory === "" ||
                price === "" ||
                modelName === "" ||
                brandName === ""
              ) {
                return null;
              }

              return (
                <div
                  key={`spareProduct_${brandName}_${modelName}_${goodsName}`}
                  ref={firstSpareProductRef}
                >
                  <Link
                    href={`/product/${parentCategory}/${productCategory}/detail/${encodeURIComponent(
                      modelName
                    )}`}
                    NewTabLink={NewTabLink}
                  >
                    <div className="flex cursor-pointer items-center justify-between rounded-[1rem] border-[1px] border-gray-2 bg-gray-1 p-[1rem]">
                      <div className="flex items-center">
                        <div className="relative mr-[0.5rem] h-[5rem] w-[5rem] flex-shrink-0 pc:mr-[1rem]">
                          {Image ? (
                            <Image
                              src={imageUrl}
                              layout="fill"
                              objectFit="contain"
                              alt={`spareProduct_${brandName}_${modelName}_${goodsName}`}
                            />
                          ) : (
                            <img
                              src={imageUrl}
                              alt={`spareProduct_${brandName}_${modelName}_${goodsName}`}
                            />
                          )}
                        </div>

                        <div>
                          <p className="break-all text-detail-4 pc:text-body-10">
                            {isValidSpecValue(brandName) && brandName}
                          </p>

                          <p className="text-detail-1 font-bold pc:text-body-8">
                            {isValidSpecValue(goodsName) && goodsName}{" "}
                            {isValidSpecValue(modelName) && modelName}
                          </p>
                        </div>
                      </div>

                      <div className="flex flex-shrink-0 items-center gap-[0.4rem] pl-[1rem]">
                        <p className="text-detail-4 pc:text-body-10">
                          {isValidSpecValue(price) && getPriceString(price)}
                        </p>
                        <Caret size="2rem" />
                      </div>
                    </div>
                  </Link>

                  <p className="mt-[1.2rem] mb-[1rem] whitespace-pre-wrap text-body-5 font-bold text-gray-10 ">
                    {productTitle}
                  </p>

                  <div
                    className="break-words text-body-7"
                    dangerouslySetInnerHTML={{
                      __html: content,
                    }}
                  />
                </div>
              );
            }
          )}
        </div>
      </div>

      {isCollapsed && (
        <Button
          size="l"
          type="outline"
          color="gray"
          className="flex w-full items-center justify-center pt-[2rem]"
          onClick={() => setIsCollapsed(false)}
        >
          <p className="mr-[0.4rem] text-body-5 font-bold text-gray-10">
            {lengthOfContentList - 1}개 제품 더보기
          </p>
          <Caret direction="down" size="2.4rem" />
        </Button>
      )}
    </div>
  );
};

export default memo(SpareProductList);