import { FC, useState } from "react";
import { ColumnProps } from "./interface";
import {
  baseModalContainerStyle,
  columnContainerStyle,
  columnLabelContainerStyle,
  columnLabelStyle,
  dragIconStyle,
} from "./style";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import { CSS } from "@dnd-kit/utilities";
import { Trigger } from "@/utils/trigger/trigger";
import { BaseModal } from "../../PublicComponent/Modal";
import { globalColor } from "@/utils/colorBuilder";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import RemoveIcon from "@mui/icons-material/Remove";
import { useSortable } from "@dnd-kit/sortable";
import { useTheme } from "@mui/material";
export const Column: FC<ColumnProps> = (props) => {
  const {
    id,
    visibility,
    childrenSetter,
    attrPath,
    onDelete,
    showDelete,
    widgetDisplayName,
    label,
    showVisible,
    extraElement,
    showCopy,
    labelTip,
    onCopy,
    onVisibilityChange,
  } = props;
const theme = useTheme()
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });

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

  const [triggerVisible, setTriggerVisible] = useState(false);

  return (
    <div
      css={columnContainerStyle}
      ref={setNodeRef}
      style={style}
      {...attributes}
    >
      <DragIndicatorIcon
        className="dragIcon"
        css={dragIconStyle}
        sx={{ color: globalColor("grayBlue-04"), fontSize: "16px" }}
        {...listeners}
      />

      <Trigger
        withoutPadding
        colorScheme="white"
        trigger="click"
        onVisibleChange={(visible) => {
          setTriggerVisible(visible);
        }}
        popupVisible={triggerVisible}
        content={
          <BaseModal
            title={label as string}
            attrPath={attrPath}
            _css={baseModalContainerStyle}
            widgetDisplayName={widgetDisplayName}
            childrenSetter={childrenSetter}
            extraElement={extraElement}
            handleCloseModal={() => {
              setTriggerVisible(false);
            }}
          />
        }
        showArrow={false}
        position="left"
        clickOutsideToClose
      >
        <div css={columnLabelContainerStyle}>
          <span css={columnLabelStyle(theme)}> {label}</span>
          {labelTip}
        </div>
      </Trigger>
      {showCopy && (
        <ContentCopyIcon
          onClick={() => {
            onCopy?.();
          }}
        />
      )}
      {showVisible && (
        <>
          {visibility ? (
            <VisibilityIcon
              onClick={() => {
                onVisibilityChange?.(!visibility);
              }}
            />
          ) : (
            <VisibilityOffIcon
              onClick={() => {
                onVisibilityChange?.(!visibility);
              }}
            />
          )}
        </>
      )}
      {showDelete && (
        <RemoveIcon
          onClick={() => {
            onDelete?.(id);
          }}
        />
      )}
    </div>
  );
};

Column.displayName = "Column";
