import React, {useState} from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next/';
import {shallowEqual} from 'react-redux';
import {DismissKeyboard} from '@components';
import SearchInput from '@components/SearchInput';
import Text from '@components/Text';
import RedBubble from '@components/RedBubble';
import {Navigation} from '@interfaces/navigation';
import FormsTabs from '@modules/form/components/FormsTabs';
import {useAppSelector} from '@redux/utils';
import {Screens, AMPLITUDE_APP_MODULES} from '@shared/constants';
import {ICON_SIZES} from '@shared/theme';

import {useFetchForms} from './useFetchForms';
import {styles} from './styles';

function FormInbox({navigation}: Navigation<Screens.FORMS>) {
  const {t} = useTranslation();
  const {
    pendingForms,
    userForms,
    agentFormNotifications,
    formNotifications,
    isResponsible,
  } = useAppSelector(
    ({form}) => ({
      pendingForms: form.pendingForms,
      userForms: form.userForms,
      agentFormNotifications: form.agentFormNotifications,
      formNotifications: form.formNotifications,
      isResponsible: form.isResponsible,
    }),
    shallowEqual,
  );
  const [searchValue, setSearchValue] = useState('');
  const {onGetMorePendingForms, onGetMoreUserForms} =
    useFetchForms(searchValue);

  const onPressRequests = () => navigation.navigate(Screens.NEW_FORM_REQUESTS);

  return (
    <DismissKeyboard style={styles.mainContainer}>
      {isResponsible && (
        <Pressable
          style={styles.buttonContainerStyle}
          onPress={onPressRequests}>
          <Text variant="subtitle1">{t('forms.requests')}</Text>
          {agentFormNotifications > 0 && (
            <RedBubble
              value={agentFormNotifications}
              size={ICON_SIZES.x5}
              fontSize={12}
            />
          )}
        </Pressable>
      )}
      <FormsTabs
        amplitudeModule={AMPLITUDE_APP_MODULES.Forms}
        pendingForms={pendingForms}
        userForms={userForms}
        firstTabLabel={t('forms.available')}
        secondTabLabel={t('forms.completed')}
        emptyLabel={t('forms.no_forms')}
        subtitleComponent={
          <SearchInput
            withClose
            closeTestID="form-and-tasks-search-close"
            value={searchValue}
            onChange={setSearchValue}
            placeholder={t('forms.search_forms')}
          />
        }
        closedUnreadMessages={formNotifications}
        handleGetMorePendingForms={onGetMorePendingForms}
        handleGetMoreUserForms={onGetMoreUserForms}
      />
    </DismissKeyboard>
  );
}

export default FormInbox;