import React, {
  FC, useCallback, useEffect, useMemo, useRef, useState, memo,
} from '../../lib/teact/teact';
import { withGlobal } from '../../lib/teact/teactn';

import {
  ApiMessage,
  ApiChatMember,
  ApiUser,
  MAIN_THREAD_ID,
} from '../../api/types';
import { GlobalActions } from '../../global/types';
import {
  ISettings,
  MediaViewerOrigin, ProfileState, ProfileTabType, SharedMediaType,
} from '../../types';

import {
  MEMBERS_SLICE,
  PROFILE_SENSITIVE_AREA,
  SHARED_MEDIA_SLICE,
  SLIDE_TRANSITION_DURATION,
} from '../../config';
import { IS_TOUCH_ENV } from '../../util/environment';
import {
  isChatAdmin, isChatChannel, isChatGroup, isChatPrivate,
} from '../../modules/helpers';
import {
  selectChatMessages,
  selectChat,
  selectCurrentMediaSearch,
  selectIsRightColumnShown,
  selectTheme,
} from '../../modules/selectors';
import { pick } from '../../util/iteratees';
import { captureEvents, SwipeDirection } from '../../util/captureEvents';
import useCacheBuster from '../../hooks/useCacheBuster';
import useProfileViewportIds from './hooks/useProfileViewportIds';
import useProfileState from './hooks/useProfileState';
import useTransitionFixes from './hooks/useTransitionFixes';
import useAsyncRendering from './hooks/useAsyncRendering';
import useLang from '../../hooks/useLang';

import Transition from '../ui/Transition';
import InfiniteScroll from '../ui/InfiniteScroll';
import TabList from '../ui/TabList';
import Spinner from '../ui/Spinner';
import ListItem from '../ui/ListItem';
import PrivateChatInfo from '../common/PrivateChatInfo';
import ProfileInfo from './ProfileInfo';
import Document from '../common/Document';
import Audio from '../common/Audio';
import ChatExtra from './ChatExtra';
import Media from '../common/Media';
import WebLink from '../common/WebLink';
import NothingFound from '../common/NothingFound';

import './Profile.scss';

type OwnProps = {
  chatId: number;
  userId?: number;
  profileState: ProfileState;
  onProfileStateChange: (state: ProfileState) => void;
};

type StateProps = {
  theme: ISettings['theme'];
  isChannel?: boolean;
  resolvedUserId?: number;
  chatMessages?: Record<number, ApiMessage>;
  foundIds?: number[];
  mediaSearchType?: SharedMediaType;
  hasMembersTab?: boolean;
  areMembersHidden?: boolean;
  members?: ApiChatMember[];
  usersById?: Record<number, ApiUser>;
  isRightColumnShown: boolean;
  isRestricted?: boolean;
  lastSyncTime?: number;
  serverTimeOffset: number;
};

type DispatchProps = Pick<GlobalActions, (
  'setLocalMediaSearchType' | 'loadMoreMembers' | 'searchMediaMessagesLocal' | 'openMediaViewer' |
  'openAudioPlayer' | 'openUserInfo' | 'focusMessage' | 'loadProfilePhotos'
)>;

const TABS = [
  { type: 'media', title: 'SharedMediaTab2' },
  { type: 'documents', title: 'SharedFilesTab2' },
  { type: 'links', title: 'SharedLinksTab2' },
  { type: 'audio', title: 'SharedMusicTab2' },
];

const HIDDEN_RENDER_DELAY = 1000;

const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
  chatId,
  profileState,
  onProfileStateChange,
  theme,
  isChannel,
  resolvedUserId,
  chatMessages,
  foundIds,
  mediaSearchType,
  hasMembersTab,
  areMembersHidden,
  members,
  usersById,
  isRightColumnShown,
  isRestricted,
  lastSyncTime,
  setLocalMediaSearchType,
  loadMoreMembers,
  searchMediaMessagesLocal,
  openMediaViewer,
  openAudioPlayer,
  openUserInfo,
  focusMessage,
  loadProfilePhotos,
  serverTimeOffset,
}) => {
  // eslint-disable-next-line no-null/no-null
  const containerRef = useRef<HTMLDivElement>(null);
  // eslint-disable-next-line no-null/no-null
  const transitionRef = useRef<HTMLDivElement>(null);
  const lang = useLang();
  const [activeTab, setActiveTab] = useState(0);

  const tabs = useMemo(() => ([
    ...(hasMembersTab ? [{
      type: 'members', title: isChannel ? 'ChannelSubscribers' : 'GroupMembers',
    }] : []),
    ...TABS,
  ]), [hasMembersTab, isChannel]);
  const tabType = tabs[activeTab].type as ProfileTabType;

  const [resultType, viewportIds, getMore, noProfileInfo] = useProfileViewportIds(
    isRightColumnShown, loadMoreMembers, searchMediaMessagesLocal, tabType, mediaSearchType, members,
    usersById, chatMessages, foundIds, chatId, lastSyncTime, serverTimeOffset,
  );
  const activeKey = tabs.findIndex(({ type }) => type === resultType);

  const { handleScroll } = useProfileState(containerRef, tabType, profileState, onProfileStateChange);

  const { applyTransitionFix, releaseTransitionFix } = useTransitionFixes(containerRef);

  const [cacheBuster, resetCacheBuster] = useCacheBuster();

  const handleTransitionStop = useCallback(() => {
    releaseTransitionFix();
    resetCacheBuster();
  }, [releaseTransitionFix, resetCacheBuster]);

  // Update search type when switching tabs
  useEffect(() => {
    setLocalMediaSearchType({ mediaType: tabType });
  }, [setLocalMediaSearchType, tabType]);

  const profileId = resolvedUserId || chatId;

  useEffect(() => {
    if (lastSyncTime) {
      loadProfilePhotos({ profileId });
    }
  }, [loadProfilePhotos, profileId, lastSyncTime]);

  const handleSelectMedia = useCallback((messageId: number) => {
    openMediaViewer({
      chatId: profileId,
      threadId: MAIN_THREAD_ID,
      messageId,
      origin: MediaViewerOrigin.SharedMedia,
    });
  }, [profileId, openMediaViewer]);

  const handlePlayAudio = useCallback((messageId: number) => {
    openAudioPlayer({ chatId: profileId, messageId });
  }, [profileId, openAudioPlayer]);

  const handleMemberClick = useCallback((id: number) => {
    openUserInfo({ id });
  }, [openUserInfo]);

  const handleMessageFocus = useCallback((messageId: number) => {
    focusMessage({ chatId: profileId, messageId });
  }, [profileId, focusMessage]);

  useEffect(() => {
    if (!transitionRef.current || !IS_TOUCH_ENV) {
      return undefined;
    }

    return captureEvents(transitionRef.current, {
      onSwipe: ((e, direction) => {
        if (direction === SwipeDirection.Left) {
          setActiveTab(Math.min(activeTab + 1, tabs.length - 1));
        } else if (direction === SwipeDirection.Right) {
          setActiveTab(Math.max(0, activeTab - 1));
        }
      }),
    });
  }, [activeTab, tabs.length]);

  let renderingDelay;
  const isFirstTab = resultType === 'members' || (!hasMembersTab && resultType === 'media');
  // @optimization Used to unparallelize rendering of message list and profile media
  if (isFirstTab) {
    renderingDelay = !isRightColumnShown ? HIDDEN_RENDER_DELAY : 0;
    // @optimization Used to delay first render of secondary tabs while animating
  } else if (!viewportIds) {
    renderingDelay = SLIDE_TRANSITION_DURATION;
  }
  const canRenderContents = useAsyncRendering([chatId, resultType], renderingDelay);

  function renderSharedMedia() {
    if (!viewportIds || !canRenderContents || !chatMessages) {
      // This is just a single-frame delay so we do not show spinner
      const noSpinner = isFirstTab && viewportIds && !canRenderContents;

      return (
        <div className="content empty-list">
          {!noSpinner && <Spinner />}
        </div>
      );
    }

    if (!viewportIds.length) {
      let text: string;

      switch (resultType) {
        case 'members':
          text = areMembersHidden ? 'You have no access to group members list.' : 'No members found';
          break;
        case 'documents':
          text = lang('lng_media_file_empty_search');
          break;
        case 'links':
          text = lang('lng_media_link_empty_search');
          break;
        case 'audio':
          text = lang('lng_media_song_empty_search');
          break;
        default:
          text = lang('SharedMedia.EmptyTitle');
      }

      return (
        <div className="content empty-list">
          <NothingFound text={text} />
        </div>
      );
    }

    return (
      <div
        className={`content ${resultType}-list`}
        dir={lang.isRtl && resultType === 'media' ? 'rtl' : undefined}
        teactFastList
      >
        {resultType === 'media' ? (
          viewportIds!.map((id) => chatMessages[id] && (
            <Media
              key={id}
              message={chatMessages[id]}
              onClick={handleSelectMedia}
            />
          ))
        ) : resultType === 'documents' ? (
          viewportIds!.map((id) => chatMessages[id] && (
            <Document
              key={id}
              message={chatMessages[id]}
              withDate
              smaller
              className="scroll-item"
              onDateClick={handleMessageFocus}
            />
          ))
        ) : resultType === 'links' ? (
          viewportIds!.map((id) => chatMessages[id] && (
            <WebLink
              key={id}
              message={chatMessages[id]}
              onMessageClick={handleMessageFocus}
            />
          ))
        ) : resultType === 'audio' ? (
          viewportIds!.map((id) => chatMessages[id] && (
            <Audio
              key={id}
              theme={theme}
              message={chatMessages[id]}
              target="sharedMedia"
              date={chatMessages[id].date}
              lastSyncTime={lastSyncTime}
              className="scroll-item"
              onPlay={handlePlayAudio}
              onDateClick={handleMessageFocus}
            />
          ))
        ) : resultType === 'members' ? (
          viewportIds!.map((id, i) => (
            <ListItem
              key={id}
              teactOrderKey={i}
              className="chat-item-clickable scroll-item"
              onClick={() => handleMemberClick(id)}
            >
              <PrivateChatInfo userId={id} forceShowSelf />
            </ListItem>
          ))
        ) : undefined}
      </div>
    );
  }

  return (
    <InfiniteScroll
      ref={containerRef}
      className="Profile custom-scroll"
      itemSelector={buildInfiniteScrollItemSelector(resultType)}
      items={canRenderContents ? viewportIds : undefined}
      cacheBuster={cacheBuster}
      sensitiveArea={PROFILE_SENSITIVE_AREA}
      preloadBackwards={canRenderContents ? (resultType === 'members' ? MEMBERS_SLICE : SHARED_MEDIA_SLICE) : 0}
      // To prevent scroll jumps caused by reordering member list
      noScrollRestoreOnTop
      noFastList
      onLoadMore={getMore}
      onScroll={handleScroll}
    >
      {!noProfileInfo && renderProfileInfo(chatId, resolvedUserId)}
      {!isRestricted && (
        <div className="shared-media">
          <Transition
            ref={transitionRef}
            name={lang.isRtl ? 'slide-reversed' : 'slide'}
            activeKey={activeKey}
            renderCount={tabs.length}
            shouldRestoreHeight
            className="shared-media-transition"
            onStart={applyTransitionFix}
            onStop={handleTransitionStop}
          >
            {renderSharedMedia}
          </Transition>
          <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
        </div>
      )}
    </InfiniteScroll>
  );
};

function renderProfileInfo(chatId: number, resolvedUserId?: number) {
  return (
    <div className="profile-info">
      <ProfileInfo
        userId={resolvedUserId || chatId}
        forceShowSelf={resolvedUserId !== chatId}
      />
      <ChatExtra chatOrUserId={resolvedUserId || chatId} forceShowSelf={resolvedUserId !== chatId} />
    </div>
  );
}

function buildInfiniteScrollItemSelector(resultType: string) {
  return [
    // Used on first render
    `.shared-media-transition > div:only-child > .${resultType}-list > .scroll-item`,
    // Used after transition
    `.shared-media-transition > div.active > .${resultType}-list > .scroll-item`,
  ].join(', ');
}

export default memo(withGlobal<OwnProps>(
  (global, { chatId, userId }): StateProps => {
    const chat = selectChat(global, chatId);

    const chatMessages = selectChatMessages(global, userId || chatId);
    const { currentType: mediaSearchType, resultsByType } = selectCurrentMediaSearch(global) || {};
    const { foundIds } = (resultsByType && mediaSearchType && resultsByType[mediaSearchType]) || {};

    const { byId: usersById } = global.users;

    const isGroup = chat && isChatGroup(chat);
    const isChannel = chat && isChatChannel(chat);
    const hasMembersTab = isGroup || (isChannel && isChatAdmin(chat!));
    const members = chat && chat.fullInfo && chat.fullInfo.members;
    const areMembersHidden = hasMembersTab && chat && chat.fullInfo && !chat.fullInfo.canViewMembers;

    let resolvedUserId;
    if (userId) {
      resolvedUserId = userId;
    } else if (isChatPrivate(chatId)) {
      resolvedUserId = chatId;
    }

    return {
      theme: selectTheme(global),
      isChannel,
      resolvedUserId,
      chatMessages,
      foundIds,
      mediaSearchType,
      hasMembersTab,
      areMembersHidden,
      ...(hasMembersTab && members && {
        members,
        usersById,
      }),
      isRightColumnShown: selectIsRightColumnShown(global),
      isRestricted: chat && chat.isRestricted,
      lastSyncTime: global.lastSyncTime,
      serverTimeOffset: global.serverTimeOffset,
    };
  },
  (setGlobal, actions): DispatchProps => pick(actions, [
    'setLocalMediaSearchType',
    'loadMoreMembers',
    'searchMediaMessagesLocal',
    'openMediaViewer',
    'openAudioPlayer',
    'openUserInfo',
    'focusMessage',
    'loadProfilePhotos',
  ]),
)(Profile));