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 { logEvent } from 'src/config/logging';
import { EventName } from 'src/types/amplitude';

import { useSidebarSearchQuery } from '../hooks/useSidebarSearchQuery';

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

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

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