import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import InputSearch from '@material-hu/components/design-system/Inputs/Search';

import { useSidebarSearchQuery } from 'src/pages/dashboard/HuLibraries/hooks/useSidebarSearchQuery';
import { LogEvents, logEvent } from 'src/utils/logging';

export const SidebarSearchBar = () => {
  const { spacing } = useTheme();
  const { search, setSearch } = useSidebarSearchQuery();

  const handleOnFocus = () => {
    logEvent(LogEvents.WIDGET_LIBRARY_SEARCH);
  };

  return (
    <Stack
      sx={{
        backgroundColor: 'white',
        p: 1.5,
        flexShrink: 0,
        maxHeight: spacing(8),
        '& .MuiFormControl-root': { height: spacing(5) },
      }}
    >
      <InputSearch
        onFocus={handleOnFocus}
        value={search}
        variant="custom"
        onChange={setSearch}
      />
    </Stack>
  );
};