import React from 'react';
import {
  Box,
  Header,
  Icon,
  IconButton,
  Icons,
  Menu,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  PopOut,
  config,
  toRem,
} from 'folds';
import FocusTrap from 'focus-trap-react';
import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
import { UserRoomProfile } from './user-profile';
import { UserRoomProfileState } from '../state/userRoomProfile';
import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
import { stopPropagation } from '../utils/keyboard';
import { SpaceProvider } from '../hooks/useSpace';
import { RoomProvider } from '../hooks/useRoom';
import { ScreenSize, useScreenSize } from '../hooks/useScreenSize';

// Matches useModalStyle's mobile branch: fill the phone screen with internal
// scroll so tall profiles (moderation actions, device list, notes) are fully
// reachable — the anchored 340px popout below can't scroll and clipped them.
const MOBILE_FULLSCREEN = {
  width: '100%',
  height: '100%',
  maxWidth: '100%',
  maxHeight: '100%',
  borderRadius: 0,
  display: 'flex',
  flexDirection: 'column',
} as const;

function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
  const { roomId, spaceId, userId, cords, position } = state;
  const allJoinedRooms = useAllJoinedRoomsSet();
  const getRoom = useGetRoom(allJoinedRooms);
  const room = getRoom(roomId);
  const space = spaceId ? getRoom(spaceId) : undefined;
  const screenSize = useScreenSize();

  const close = useCloseUserRoomProfile();

  if (!room) return null;

  const profile = (
    <SpaceProvider value={space ?? null}>
      <RoomProvider value={room}>
        <UserRoomProfile userId={userId} />
      </RoomProvider>
    </SpaceProvider>
  );

  const focusTrapOptions = {
    initialFocus: false,
    onDeactivate: close,
    clickOutsideDeactivates: true,
    escapeDeactivates: stopPropagation,
  };

  // On phones, render as a full-screen scrollable modal instead of an anchored,
  // fixed-width, unscrollable popout.
  if (screenSize === ScreenSize.Mobile) {
    return (
      <Overlay open backdrop={<OverlayBackdrop />}>
        <OverlayCenter>
          <FocusTrap focusTrapOptions={focusTrapOptions}>
            <Modal size="500" style={MOBILE_FULLSCREEN}>
              {/* Full-screen covers the backdrop (no tap-to-dismiss) and the
                  profile has no self-close, so provide an explicit close. */}
              <Header size="600" style={{ flexShrink: 0, paddingRight: config.space.S200 }}>
                <Box grow="Yes" />
                <IconButton size="300" radii="300" onClick={close} aria-label="Close">
                  <Icon src={Icons.Cross} />
                </IconButton>
              </Header>
              <Box grow="Yes" style={{ overflow: 'hidden auto' }}>
                {profile}
              </Box>
            </Modal>
          </FocusTrap>
        </OverlayCenter>
      </Overlay>
    );
  }

  return (
    <PopOut
      anchor={cords}
      position={position ?? 'Top'}
      align="Start"
      content={
        <FocusTrap focusTrapOptions={focusTrapOptions}>
          <Menu style={{ width: toRem(340) }}>{profile}</Menu>
        </FocusTrap>
      }
    />
  );
}

export function UserRoomProfileRenderer() {
  const state = useUserRoomProfileState();

  if (!state) return null;
  return <UserRoomProfileContextMenu state={state} />;
}