import { Button, TextField, Stack } from "@mui/material";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import AdvancedSearch from "../AdvancedSearch/AdvancedSearch";
import { TABLE_SEARCH_LABELS } from "./constants";

type DataTableHeaderProps = {
  extraColumns?: string[];
  showExtraColumns: boolean;
  onToggleExtraColumns: () => void;
  onOpenExport: () => void;
};

export default function DataTableHeader({
  extraColumns,
  showExtraColumns,
  onToggleExtraColumns,
  onOpenExport,
}: DataTableHeaderProps) {
  return (
    <Stack
      direction="row"
      justifyContent="space-between"
      alignItems="center"
      p={2}
      flexWrap="wrap"
      gap={2}
    >
      <TextField
        label="Search = To Be Implemented"
        variant="outlined"
        size="small"
        disabled
        onChange={e => console.log(`setSearchQuery(${e.target.value})`)}
        sx={{ width: 300, backgroundColor: "#f0f0f0" }}
      />
      <AdvancedSearch labels={TABLE_SEARCH_LABELS} />
      <Button
        variant="outlined"
        startIcon={<FileUploadIcon />}
        onClick={onOpenExport}
      >
        Export
      </Button>
      {extraColumns && extraColumns.length > 0 && (
        <Button variant="outlined" onClick={onToggleExtraColumns}>
          {showExtraColumns ? "Hide Extra Columns" : "Show Extra Columns"}
        </Button>
      )}
    </Stack>
  );
}