import { SearchBar } from '@/components/FunctionalArea/TopBar/SearchBar';
import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
import { openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { Button } from '@/shared/Button';

export const TopBar = (): JSX.Element => {
  const dispatch = useAppDispatch();

  const onSubmapsClick = (): void => {
    dispatch(openSubmapsDrawer());
  };

  return (
    <div className="flex h-16 w-full flex-row items-center justify-between border-b border-font-500 border-opacity-[0.12] bg-white py-4 pl-7 pr-6">
      <div className="flex flex-row items-center">
        <UserAvatar />
        <SearchBar />
        <Button icon="plus" isIcon isFrontIcon className="ml-8 mr-4" onClick={onSubmapsClick}>
          Submaps
        </Button>
        <Button icon="plus" isIcon isFrontIcon>
          Overlays
        </Button>
      </div>
      <div className="bg-primary-100 px-4 py-1 text-xs leading-6 text-primary-500">
        Parkinson disease map
      </div>
    </div>
  );
};