import { useState } from "react";
import { STATUSES } from "../../../config";
import { HeaderWrapper } from "../HeaderWrapper";
import { StatusSelect } from "../../../components/StatusSelect";
import { Button } from "antd";
import { useExportOnApprovalData } from "./useExportOnApprovalData";
import { ChangeStatusButton } from "./ChangeStatusButton";

export const Header = ({
  selectedIds,
  onClearSelected,
  onOpenMakeWorkingModal,
  orderColumns
}) => {
  const [status, setStatus] = useState(STATUSES.pending);

  const handleClear = (e) => {
    e.stopPropagation();
    onClearSelected();
  };

  return (
    <HeaderWrapper
      leftColumn={
        selectedIds.length > 0 && (
          <>
            <StatusSelect value={status} onChange={setStatus} />
            <ChangeStatusButton
              selectedIds={selectedIds}
              selectedStatus={status}
              onOpenMakeWorkingModal={onOpenMakeWorkingModal}
              onSuccess={onClearSelected}
            />
          </>
        )
      }
      rightColumn={
        selectedIds.length > 0 && (
          <Button onClick={handleClear}>Очистить все</Button>
        )
      }
      classes={{
        leftColumn: "flex items-center gap-x-4",
        rightColumn: "flex item-center gap-x-4",
      }}
      orderColumns={orderColumns}
      exportProvider={useExportOnApprovalData}
    />
  );
};
