import { Cell, Row, flexRender } from "@tanstack/react-table";
import { Maximize2Icon } from "lucide-react";
import React from "react";
import { TResponseTableData } from "@formbricks/types/responses";
import { cn } from "@/lib/cn";
import { getCommonPinningStyles } from "@/modules/ui/components/data-table/lib/utils";
import { TableCell } from "@/modules/ui/components/table";

interface ResponseTableCellProps {
  cell: Cell<TResponseTableData, unknown>;
  row: Row<TResponseTableData>;
  isExpanded: boolean;
  setSelectedResponseId: (responseId: string | null) => void;
}

const ResponseTableCellComponent = ({
  cell,
  row,
  isExpanded,
  setSelectedResponseId,
}: ResponseTableCellProps) => {
  // Function to handle cell click
  const handleCellClick = () => {
    if (cell.column.id !== "select") {
      setSelectedResponseId(row.id);
    }
  };

  const cellStyles = {
    width: `${cell.column.getSize()}px`,
    ...(cell.column.id === "select" ? getCommonPinningStyles(cell.column) : {}),
  };

  // Conditional rendering of maximize icon
  const renderMaximizeIcon = cell.column.id === "createdAt" && (
    <button
      type="button"
      aria-label="Expand response"
      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 hover:border-slate-300 focus:outline-none group-hover:flex"
      onClick={handleCellClick}>
      <Maximize2Icon className="h-4 w-4" />
    </button>
  );

  return (
    <TableCell
      key={cell.id}
      className={cn(
        "border-slate-200 bg-white shadow-none group-hover:bg-slate-100",
        row.getIsSelected() && "bg-slate-100",
        {
          "border-r": !cell.column.getIsLastColumn(),
          "border-l": !cell.column.getIsFirstColumn(),
        }
      )}
      style={cellStyles}
      onClick={handleCellClick}>
      <div className="flex w-full items-center">
        <div className={cn("flex flex-1 items-center truncate", isExpanded ? "h-full" : "h-10")}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </div>
        {renderMaximizeIcon}
      </div>
    </TableCell>
  );
};

export const ResponseTableCell = React.memo(ResponseTableCellComponent);
