import React, { memo, useRef, useState } from "react";
import Heading from "../../UI/Heading";
import { IProductCompareTableProps } from "./ProductCompareTable.types";
import ProductCompareTableHighlightedTable from "./ProductCompareTableHighlightedTable";

const ProductCompareTable = ({
  title,
  parentCategory,
  productCategory,
  productMap,
  productModelNameList,
  specCategoryNameList,
  showTitle = true,
  showProductInforamtionRow = true,
  highlightedProductModelName,
  highlightedSpecName,
  Image,
  NewTabLink,
}: IProductCompareTableProps) => {
  const tableRef = useRef<HTMLDivElement>(null);

  const [isDragging, setIsDragging] = useState<boolean>(false);
  const [startX, setStartX] = useState<number>(0);

  const handleDragStart = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.preventDefault();
    setIsDragging(true);
    setStartX(e.pageX + (tableRef.current?.scrollLeft ?? 0));
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  const handleDragMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    if (isDragging && tableRef.current) {
      tableRef.current.scrollLeft = startX - e.pageX;
    }
  };

  return (
    <div
      data-testid="ContentsEditorProductCompareTable"
      className="relative box-border w-full pt-[5rem] pb-[10rem] pc:max-w-[80rem] pc:pt-[4rem] pc:pb-[6rem]"
    >
      {showTitle && (
        <Heading
          level={4}
          className="m-[2rem] mt-0 inline-block bg-gray-10 px-[1rem] py-[0.5rem] text-white"
        >
          {title}
        </Heading>
      )}

      <div
        className={`scrollbar-hide overflow-x-auto ${
          isDragging ? "cursor-grabbing" : "cursor-grab"
        }`}
        ref={tableRef}
        onMouseDown={handleDragStart}
        onMouseMove={handleDragMove}
        onMouseUp={handleDragEnd}
        onMouseLeave={handleDragEnd}
      >
        <ProductCompareTableHighlightedTable
          parentCategory={parentCategory}
          productCategory={productCategory}
          productMap={productMap}
          productModelNameList={productModelNameList}
          specCategoryNameList={specCategoryNameList}
          showProductInforamtionRow={showProductInforamtionRow}
          highlightedProductModelName={highlightedProductModelName}
          highlightedSpecName={highlightedSpecName}
          Image={Image}
          NewTabLink={NewTabLink}
        />
      </div>
    </div>
  );
};

export default memo(ProductCompareTable);