import { twMerge } from 'tailwind-merge';
import { IconButton } from '@/shared/IconButton';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { closeDrawer } from '@/redux/drawer/drawer.slice';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { drawerDataSelector } from '@/redux/drawer/drawer.selectors';
import {
  CLOSE_BUTTON_ROLE,
  DRAWER_ROLE,
  SOURCE_FROM_DRAWER,
} from '@/components/Map/Drawer/Drawer.constants';

export const Drawer = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const drawerData = useAppSelector(drawerDataSelector);
  const { open } = drawerData;

  const handleCloseDrawer = (): void => {
    // eslint-disable-next-line prefer-template
    dispatch(closeDrawer(SOURCE_FROM_DRAWER));
  };

  return (
    <div
      className={twMerge(
        'absolute left-[88px] top-[104px] z-10 h-calc-drawer w-[432px] -translate-x-full transform bg-white-pearl text-font-500 transition-all duration-500',
        open && 'translate-x-0',
      )}
      role={DRAWER_ROLE}
    >
      <div className="flex items-center justify-between border-b border-b-divide px-6 py-8 text-xl">
        <div>
          <span className="font-normal">Search: </span>
          <span className="font-semibold">NADH</span>
        </div>
        <IconButton
          className="bg-white-pearl"
          classNameIcon="fill-font-500"
          icon="close"
          role={CLOSE_BUTTON_ROLE}
          onClick={handleCloseDrawer}
        />
      </div>
    </div>
  );
};