import React, { memo } from "react";
import ColorChips from "../../ColorChips";
import PickLabel from "../../PickLabel";
import { Caret } from "../../UI/Icon";
import Text from "../../UI/Text";
import Link from "../../shared/Link";
import { IProductCompareTableHighlightedTableProps } from "./ProductCompareTable.types";

const ProductCompareTableHighlightedTable = ({
  parentCategory,
  productCategory,
  productMap,
  productModelNameList,
  specCategoryNameList,
  showProductInforamtionRow,
  highlightedProductModelName,
  highlightedSpecName,
  Image,
  NewTabLink,
}: IProductCompareTableHighlightedTableProps) => {
  return (
    <table className="table-fixed border-separate border-spacing-[0px]">
      <tbody>
        {/* product info */}
        {showProductInforamtionRow && (
          <tr className="border-[1px] border-gray-3">
            <td className="sticky left-0 z-[2] cursor-default border-[1px] border-gray-3 bg-gray-1 p-[1rem]">
              <Text type="B5" className="text-center text-gray-10">
                제품 정보
              </Text>
            </td>

            {productModelNameList.map((modelName) => {
              if (!productMap[modelName]) {
                return;
              }

              const isColumnHighlighted =
                highlightedProductModelName === modelName;

              const {
                pickType,
                imageUrl,
                specCategoryMap,
                showDetailButton = true,
              } = productMap[modelName];

              return (
                <td
                  key={`productInformation_${modelName}`}
                  className={`relative border-[1px] p-[1rem] text-center align-top ${
                    isColumnHighlighted
                      ? "border-x-blue-7 border-t-blue-7 bg-blue-1"
                      : "border-gray-3"
                  }`}
                >
                  <PickLabel
                    type="label"
                    pickType={pickType}
                    labelStyle="left-0 top-0 absolute"
                  />

                  <div className="relative mx-auto mb-[0.5rem] h-[10rem] w-[10rem]">
                    {Image ? (
                      <Image
                        src={imageUrl ?? ""}
                        layout="fill"
                        objectFit="contain"
                        alt={modelName}
                      />
                    ) : (
                      <img src={imageUrl ?? ""} alt={modelName} />
                    )}
                  </div>

                  <div className="my-[1rem] mx-auto h-[1px] w-[10rem] bg-gray-1" />

                  <Text
                    key={`${modelName}_brand`}
                    type="D3"
                    className="text-gray-8"
                  >
                    {specCategoryMap["브랜드"] &&
                      specCategoryMap["브랜드"].value}
                  </Text>

                  {["제품명", "모델명", "가격대"].map((specName) => {
                    return (
                      <Text
                        key={`${modelName}_${specName}`}
                        type="B8"
                        className="text-gray-10"
                      >
                        {specCategoryMap[specName] &&
                          specCategoryMap[specName].value}
                        {specName === "가격대" && "만~"}
                      </Text>
                    );
                  })}

                  {showDetailButton && (
                    <Link
                      href={`/product/${parentCategory}/${productCategory}/detail/${encodeURIComponent(
                        modelName
                      )}`}
                      NewTabLink={NewTabLink}
                    >
                      <div className="mt-[0.5rem] flex cursor-pointer items-center justify-center gap-[0.5rem]">
                        <Text type="B10">자세히 보기</Text>
                        <Caret size="1.5rem" />
                      </div>
                    </Link>
                  )}
                </td>
              );
            })}
          </tr>
        )}

        {/* product spec data */}
        {specCategoryNameList?.map((specCategoryName, index) => {
          const isRowHighlighted = highlightedSpecName === specCategoryName;

          return (
            <tr
              key={`productSpecCategory_${specCategoryName}`}
              className={`${isRowHighlighted ? "bg-blue-1" : ""}`}
            >
              <td
                className={`sticky left-0 z-[2] min-h-[4.3rem] cursor-default border-[1px] p-[1rem] ${
                  isRowHighlighted
                    ? "border-y-blue-7 border-l-blue-7 bg-blue-1"
                    : "border-gray-3 bg-gray-1"
                }`}
              >
                <Text
                  type="B5"
                  className="w-[7rem] break-words text-center text-gray-10 pc:w-[8rem]"
                >
                  {specCategoryName}
                </Text>
              </td>

              {productModelNameList.map((modelName) => {
                if (!productMap[modelName]) {
                  return;
                }
                const { specCategoryMap } = productMap[modelName];

                if (!specCategoryMap[specCategoryName]) {
                  return;
                }
                const { value, unit, prefix, postfix } = specCategoryMap[
                  specCategoryName
                ];

                const isColHighlighted =
                  highlightedProductModelName === modelName;

                const isLastRow = specCategoryNameList.length - 1 === index;

                return (
                  <>
                    <td
                      key={`specCategory_${modelName}_${specCategoryName}_${value}`}
                      className={`border-[1px]
                   ${
                     isColHighlighted && !isRowHighlighted
                       ? "border-x-blue-7 bg-blue-1"
                       : ""
                   }
                   ${
                     isColHighlighted && isRowHighlighted
                       ? "border-x-blue-7 bg-blue-2"
                       : ""
                   }
                   ${isColHighlighted && isLastRow ? "border-b-blue-7" : ""}
                   ${
                     !showProductInforamtionRow &&
                     isColHighlighted &&
                     index === 0
                       ? "border-t-blue-7"
                       : ""
                   }
                   ${
                     isRowHighlighted
                       ? "border-y-blue-7 last:border-r-blue-7"
                       : ""
                   }
                  
                   `}
                    >
                      <div className="flex w-[14rem] items-center justify-center">
                        {specCategoryName === "색상" ? (
                          <div className="px-[1.7rem] py-[0.5rem] pc:px-[2.7rem]">
                            <ColorChips
                              colors={(value as string) ?? ""}
                              shape="square"
                              chipWidth="1.2"
                              chipHeight="1.2"
                              size={10}
                              isWrapped
                            />
                          </div>
                        ) : (
                          <Text
                            type="B7"
                            className="p-[1rem] text-center text-gray-10"
                          >
                            {value === "-"
                              ? "-"
                              : `${prefix ?? ""} ${value} ${unit ?? postfix ?? ""}`}
                          </Text>
                        )}
                      </div>
                    </td>
                  </>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default memo(ProductCompareTableHighlightedTable);