import React from 'react';
import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, toRem } from 'folds';
import { useAtomValue } from 'jotai';
import { RoomCard } from '../../components/room-card';
import { RoomTopicViewer } from '../../components/room-topic-viewer';
import { Page, PageHeader } from '../../components/page';
import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { allRoomsAtom } from '../../state/room-list/roomList';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { BackRouteHandler } from '../../components/BackRouteHandler';

type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
export function JoinBeforeNavigate({
  roomIdOrAlias,
  eventId,
  viaServers,
}: JoinBeforeNavigateProps) {
  const mx = useMatrixClient();
  const allRooms = useAtomValue(allRoomsAtom);
  const { navigateRoom, navigateSpace } = useRoomNavigate();
  const screenSize = useScreenSizeContext();

  const handleView = (roomId: string) => {
    if (mx.getRoom(roomId)?.isSpaceRoom()) {
      navigateSpace(roomId);
      return;
    }
    navigateRoom(roomId, eventId);
  };

  return (
    <Page>
      <RoomSummaryLoader roomIdOrAlias={roomIdOrAlias} via={viaServers}>
        {(summary, state) => (
          <>
            <PageHeader balance>
              <Box grow="Yes" gap="200">
                <Box shrink="No">
                  {screenSize === ScreenSize.Mobile && (
                    <BackRouteHandler>
                      {(onBack) => (
                        <IconButton onClick={onBack} aria-label="Back">
                          <Icon src={Icons.ArrowLeft} />
                        </IconButton>
                      )}
                    </BackRouteHandler>
                  )}
                </Box>
                <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
                  <Text size="H3" truncate>
                    {summary?.name || summary?.canonical_alias || roomIdOrAlias}
                  </Text>
                </Box>
              </Box>
            </PageHeader>
            <Box grow="Yes">
              <Scroll hideTrack visibility="Hover" size="0">
                <Box
                  style={{ height: '100%' }}
                  grow="Yes"
                  alignItems="Center"
                  justifyContent="Center"
                >
                  {state.loading && !summary ? (
                    <Spinner size="600" variant="Secondary" />
                  ) : (
                    <RoomCard
                      hero
                      style={{ maxWidth: toRem(420), width: '100%' }}
                      roomIdOrAlias={roomIdOrAlias}
                      allRooms={allRooms}
                      avatarUrl={summary?.avatar_url}
                      name={summary?.name}
                      canonicalAlias={summary?.canonical_alias}
                      topic={summary?.topic}
                      memberCount={summary?.num_joined_members}
                      roomType={summary?.room_type}
                      joinRule={summary?.join_rule}
                      encrypted={!!summary?.['im.nheko.summary.encryption']}
                      worldReadable={summary?.world_readable}
                      membership={summary?.membership}
                      viaServers={viaServers}
                      renderTopicViewer={(name, topic, requestClose) => (
                        <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
                      )}
                      onView={handleView}
                    />
                  )}
                </Box>
              </Scroll>
            </Box>
          </>
        )}
      </RoomSummaryLoader>
    </Page>
  );
}
