import { useSortable } from "@dnd-kit/sortable";
import { Box, Typography } from "@mui/material";
import {
  DragandDrogIcon,
  VisibilityIcon,
  VisibilityOffIcon,
} from "../../../assets/svg";
import { CSS } from "@dnd-kit/utilities";
import { camelCaseToTitle } from "../../types/common";

const DraggableColumn = ({
  column,
  onToggle,
}: {
  column: any;
  onToggle: () => void;
}) => {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id: column.id,
    });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const isVisible = column.getIsVisible();
  const label =
    typeof column.columnDef.header === "string"
      ? column.columnDef.header
      : column.id;

  return (
    <div ref={setNodeRef} style={style} {...attributes} className="column-row">
      <Box {...listeners} className="drag-icon">
        <DragandDrogIcon />
      </Box>
      <Typography>{camelCaseToTitle(label as string)}</Typography>
      <Box onClick={onToggle} className="visibility-icon">
        {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
      </Box>
    </div>
  );
};

export default DraggableColumn;