import React, {
  createContext,
  useRef,
  useState,
  useContext,
  forwardRef,
} from "react";
import classNames from "classnames";
import { TableColumn } from "../../TableProps";
import { useConfig } from "../../../_util/config-context";
import { mergeRefs } from "../../../_util/merge-refs";
/**
 * 拖拽 Context
 */
interface ResizeContextValue {
  /**
   * 表格head区Ref
   */
  wrapperRef?: React.RefObject<HTMLDivElement>;

  /**
   * 表格head区Ref
   */
  lineRef?: React.RefObject<HTMLDivElement>;

  /**
   * 表格head区Ref
   */
  headRef?: React.RefObject<HTMLDivElement>;

  /**
   * 是否禁用行高亮
   */
  isResizing?: boolean;

  /**
   * 设置禁用行高亮参数
   */
  setIsResizing?: React.Dispatch<React.SetStateAction<any>>;

  /**
   * 设置表格head区Ref
   */
  setHeadRef?: (element: HTMLDivElement) => void;

  /**
   * 列的类名称
   */
  columns?: TableColumn[];

  /**
   * 类前缀
   */
  classPrefix?: string;
}

/**
 * 拖拽 Context 实例
 */
export const ResizeContext = createContext<ResizeContextValue>({});
ResizeContext.displayName = "Resizable";

/**
 * 注入到外层容器
 */
interface ResizableTableProps {
  /**
   * 表格
   */
  table: JSX.Element;

  /**
   * 列配置
   */
  columns: TableColumn<any>[];

  /**
   * 外层传入className
   */
  className?: string;
}
export function ResizableTable({
  table,
  columns,
  ...props
}: ResizableTableProps) {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const lineRef = useRef<HTMLDivElement>(null);
  const headRef = useRef<HTMLDivElement>(null);
  const [isResizing, setIsResizing] = useState(false);

  const { classPrefix } = useConfig();
  const resizeContext: ResizeContextValue = {
    wrapperRef,
    lineRef,
    columns,
    classPrefix,
    headRef,
    isResizing,
    setIsResizing,
    setHeadRef: (element: HTMLDivElement) => {
      headRef.current = element;
    },
  };
  return (
    <ResizeContext.Provider value={resizeContext}>
      {React.cloneElement(table, {
        ...props,
        className: classNames(
          table.props.className,
          `${classPrefix}-table--resizeable`,
          props.className // eslint-disable-line
        ),
        children: (
          <div
            style={{ position: "relative", overflow: "auto" }}
            ref={wrapperRef}
          >
            <div
              ref={lineRef}
              style={{
                position: "absolute",
                top: 0,
                left: "0px",
                height: "100%",
                backgroundColor: "#e7eaef",
                width: "1px",
                zIndex: 500,
                display: "none",
              }}
            />
            {table.props.children}
          </div>
        ),
      })}
    </ResizeContext.Provider>
  );
}

export const ResizableTableHead = forwardRef(
  (
    { head, ...props }: ResizableTableHeadProps,
    ref: React.Ref<HTMLDivElement>
  ) => {
    const { setHeadRef } = useContext(ResizeContext);
    return React.cloneElement(head, {
      ...props,
      ref: mergeRefs(head.ref, ref, setHeadRef),
    });
  }
);
interface ResizableTableHeadProps {
  head: React.FunctionComponentElement<{
    ref: React.Ref<HTMLDivElement>;
    style: React.CSSProperties;
  }>;
}

ResizableTable.displayName = "ResizableTable";