SearchHeader

import { Clear, Search } from "@mui/icons-material";
import {
  IconButton,
  InputBase,
  Stack,
  Typography,
  type TypographyVariant,
  useTheme,
} from "@mui/material";
import React, { type MouseEvent, type ReactNode } from "react";
 
/**
 * The SearchHeader component props.
 * @public
 */
export type SearchHeaderProps = {
  onSubmit?: (searchTerm: string) => void;
  placeholder?: string | undefined;
  /**
   * @defaultValue `h1`
   */
  variant?: TypographyVariant | undefined;
  children: ReactNode;
};
 
/**
 * Search header.
 * @param props - The props of the component.
 * @returns The search header component.
 * @public
 */
export function SearchHeader({
  onSubmit,
  placeholder,
  children,
  variant = "h1",
}: SearchHeaderProps) {
  const [isSearching, setIsSearching] = React.useState(false);
  const [searchTerm, setSearchTerm] = React.useState("");
 
  const theme = useTheme();
 
  const handleSearchClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    setIsSearching(true);
  };
 
  const handleClearClick = (e: MouseEvent) => {
    e.stopPropagation();
    setSearchTerm("");
    setIsSearching(false);
    if (onSubmit) onSubmit("");
  };
 
  const handleInputBlur = () => {
    if (searchTerm === "") {
      setIsSearching(false);
      if (onSubmit) onSubmit("");
    }
  };
 
  const handleSubmit = (e: any) => {
    if (e.key === "Enter" && onSubmit) {
      onSubmit(searchTerm);
    } else if (e.key === "Escape") {
      handleClearClick(e);
    }
  };
 
  const fontSize = variant ? theme.typography[variant].fontSize : undefined;
 
  return isSearching ? (
    <InputBase
      startAdornment={
        <IconButton onClick={handleClearClick}>
          <Clear color="primary" />
        </IconButton>
      }
      autoFocus
      placeholder={placeholder}
      onClick={(e) => e.stopPropagation()}
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      onKeyDown={handleSubmit}
      onBlur={handleInputBlur}
    />
  ) : (
    <Stack spacing={1} direction="row" alignItems="center">
      <Typography variant={variant}>{children}</Typography>
      {onSubmit && (
        <IconButton onClick={handleSearchClick}>
          <Search sx={{ fontSize: fontSize }} />
        </IconButton>
      )}
    </Stack>
  );
}