import { CommandMenuOpenContainer } from '@/command-menu/components/CommandMenuOpenContainer';
import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { styled } from '@linaria/react';

import { AnimatePresence } from 'framer-motion';
import { createPortal } from 'react-dom';

const StyledCommandMenuMobileFullScreenContainer = styled.div`
  height: 100%;
  width: 100%;
`;

export const CommandMenuForMobile = () => {
  const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);

  return (
    <AnimatePresence>
      {isCommandMenuOpened && (
        <>
          {createPortal(
            <StyledCommandMenuMobileFullScreenContainer>
              <CommandMenuOpenContainer>
                <CommandMenuRouter />
              </CommandMenuOpenContainer>
            </StyledCommandMenuMobileFullScreenContainer>,
            document.body,
          )}
        </>
      )}
    </AnimatePresence>
  );
};