import React, {memo, ReactElement, useCallback, useMemo} from 'react';
import {View} from 'react-native';
import {shallowEqual} from 'react-redux';
import {RenderSceneProps, TabView, TabViewRoute} from '@components/TabView';
import ActivityIndicator from '@components/ActivityIndicator';
import {
  PendingForm,
  PendingSurvey,
  UserForm,
  UserSurvey,
} from '@modules/form/interfaces';
import {useAppSelector} from '@redux/utils';
import {Screens} from '@shared/constants';

import FormChats from '../FormChats';
import AvailableForms from './components/AvailableForms';
import {styles} from './styles';

const Loader = () => <ActivityIndicator fullScreen />;

interface Props {
  amplitudeModule: string;
  pendingForms: PendingForm[] | PendingSurvey[];
  userForms: UserForm[] | UserSurvey[];
  pendingUnreadMessages?: number;
  closedUnreadMessages?: number;
  firstTabLabel: string;
  secondTabLabel: string;
  emptyLabel: string;
  subtitleComponent?: ReactElement;
  handleGetMorePendingForms: () => void;
  handleGetMoreUserForms: () => void;
}

function FormsTabs({
  amplitudeModule,
  pendingForms,
  userForms,
  pendingUnreadMessages,
  closedUnreadMessages,
  firstTabLabel,
  secondTabLabel,
  emptyLabel,
  subtitleComponent,
  handleGetMorePendingForms,
  handleGetMoreUserForms,
}: Props) {
  const {
    loading,
    loadingUserForms,
    loadingMorePendingForms,
    hasMorePendingForms,
    loadingMoreUserForms,
  } = useAppSelector(({form}) => form, shallowEqual);

  const routes: TabViewRoute[] = useMemo(
    () => [
      {
        key: Screens.TODO_FORMS,
        title: firstTabLabel,
        badge: pendingUnreadMessages,
        module: amplitudeModule,
      },
      {
        key: Screens.DONE_FORMS,
        title: secondTabLabel,
        badge: closedUnreadMessages,
        module: amplitudeModule,
      },
    ],
    [
      amplitudeModule,
      closedUnreadMessages,
      firstTabLabel,
      pendingUnreadMessages,
      secondTabLabel,
    ],
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      switch (route.key) {
        case Screens.TODO_FORMS:
          return (
            <>
              {loading ? (
                <Loader />
              ) : (
                <AvailableForms
                  forms={pendingForms}
                  noResultsMessage={emptyLabel}
                  loadingMore={loadingMorePendingForms}
                  handleGetMore={handleGetMorePendingForms}
                  hasMore={hasMorePendingForms}
                />
              )}
            </>
          );
        case Screens.DONE_FORMS:
          return (
            <View style={styles.chatList}>
              <FormChats
                formChats={userForms}
                handleGetMore={handleGetMoreUserForms}
                loadingMore={loadingMoreUserForms}
                isLoading={loadingUserForms}
              />
            </View>
          );
        default:
          return null;
      }
    },
    [
      loading,
      pendingForms,
      emptyLabel,
      loadingMorePendingForms,
      handleGetMorePendingForms,
      userForms,
      handleGetMoreUserForms,
      loadingMoreUserForms,
      loadingUserForms,
      hasMorePendingForms,
    ],
  );

  return (
    <>
      {subtitleComponent}
      <TabView
        renderLazyPlaceholder={Loader}
        renderScene={renderScene}
        routes={routes}
        variant="tabs"
      />
    </>
  );
}

export default memo(FormsTabs);