import React, {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useFocusEffect} from '@react-navigation/native';
import {RenderSceneProps, Tabs, TabsRef} from '@components';
import i18n, {Language} from '@config/i18n';
import {Navigation} from '@interfaces/navigation';
import {LearningSessionStatus} from '@modules/learning/interfaces';
import {SearchHeader} from '@modules/learning/components/SearchHeader';
import {useInstanceId, useModuleNames, useUser} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {commonStyles} from '@shared/styles';
import {logAmplitudeEvent} from '@shared/utils/logs';
import {capitalize} from '@shared/utils/texts';

import SessionsList from './screens/SessionsList';
import {styles} from './styles';

const Sessions = ({navigation}: Navigation<Screens.LEARNING_SESSIONS>) => {
  const tabsRef = useRef<Nullable<TabsRef>>(null);
  const {theme} = useTheme();
  const moduleNames = useModuleNames();
  const {t} = useTranslation();
  const user = useUser();
  const instanceId = useInstanceId();

  const moduleName =
    capitalize(
      moduleNames?.[i18n.language as Language]?.LEARNING_SESSIONS,
      false,
    ) || t('apps.title_view_learning_sessions');
  useEffect(() => {
    navigation.setOptions({
      title: moduleName,
    });
  }, [navigation, t, moduleName]);

  useFocusEffect(() => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.SESSIONS_MINIAPP_ENTERED, {
      userId: user.id,
      instanceId,
    });
  });

  const [searchText, setSearchText] = useState('');

  const routes = [
    {
      key: 'upcoming',
      label: t('learning.session.tabs.upcoming'),
    },
    {
      key: 'finished',
      label: t('learning.session.tabs.finished'),
    },
  ];

  const renderScene = ({route: {key}}: RenderSceneProps) => {
    const commonProps = {
      searchText,
    };
    switch (key) {
      case 'upcoming':
        return (
          <SessionsList
            status={LearningSessionStatus.PUBLISHED}
            {...commonProps}
          />
        );
      case 'finished':
        return (
          <SessionsList
            status={LearningSessionStatus.FINISHED}
            {...commonProps}
          />
        );
      default:
        return null;
    }
  };

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.layout.tertiary},
      ]}>
      <SearchHeader
        searchValue={searchText}
        onSearch={setSearchText}
        placeholder={t('learning.session.search')}
        style={styles.container}
      />
      <Tabs ref={tabsRef} routes={routes} renderScene={renderScene} />
    </View>
  );
};

export default Sessions;