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

const ToggleFullScreenButton = () => {
  const {
    tableState: { fullScreen },
    toggleFullScreen,
  } = useTable();

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

  return (
    <Tooltip title="Раскрыть на полный экран" placement={"topRight"}>
      <Button onClick={handleClick}>
        {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
      </Button>
    </Tooltip>
  );
};

export const HeaderWrapper = ({
  leftColumn,
  rightColumn,
  exportProvider,
  classes,
}) => {
  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">
          {exportProvider && <ExportButton provider={exportProvider} />}
          <ToggleFullScreenButton />
        </div>
      </div>
    </div>
  );
};
