import { ExportButton } from "./ExportButton";
import { Button, Tooltip } from "antd";
import { useTable } from "../../stores/useTable";
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { TableSettings } from "./TableSettings";

const ToggleFullScreenButton = () => {
  const {
    tableState: { fullScreen },
    toggleFullScreen,
  } = useTable();
  const [hover, setHover] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setHover(false), 1500);

    return () => clearTimeout(timer);
  }, [hover]);

  const handleMouseEnter = () => {
    setHover(true);
  };
  const handleMouseLeave = () => {
    setHover(false);
  };

  const handleClick = (e) => {
    e.stopPropagation();
    toggleFullScreen();
  };

  return (
    <Tooltip
      title={fullScreen ? "Свернуть" : "Раскрыть на полный экран"}
      placement={"topRight"}
      open={hover}
    >
      <Button
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
      </Button>
    </Tooltip>
  );
};

export const HeaderWrapper = ({
  leftColumn,
  rightColumn,
  exportProvider,
  classes,
  orderColumns
}) => {
  return (
    <div className={"flex items-center w-full justify-between"}>
      <div className={classes?.leftColumn}>
        <span className="py-[5px]">Таблица атрибутов</span>
        {leftColumn}
      </div>
      <div className={classes?.rightColumn}>
        {rightColumn}
        <div className="flex items-center gap-x-1">
          <TableSettings orderColumns={orderColumns} />
          {exportProvider && <ExportButton provider={exportProvider} />}
          <ToggleFullScreenButton />
        </div>
      </div>
    </div>
  );
};