import React, {memo, useCallback, useRef, useState} from 'react';
import {ScrollView} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useFocusEffect} from '@react-navigation/native';
import {CardContainer, List, ListRow, Radio, Typography} from '@components';
import {useStepper} from '@components/_HuGo/Stepper/hooks/useStepper';
import {useCursorInfinityQuery} from '@hooks/queries/useCursorInfinityQuery';
import {getAvailableAuthors} from '@modules/drafts/services';
import {AuthorPermission, AuthorType} from '@modules/drafts/interfaces';
import {DRAFT_QUERY_KEYS} from '@modules/drafts/constants';
import {REDUCED_LIMIT} from '@services/constants';
import {useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils';

import {styles} from './styles';

const keyExtractor = (item: AuthorPermission) => item.id.toString();

function SelectAuthor() {
  const {setFooterProps} = useStepper();
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [selectedPermission, setSelectedPermission] =
    useState<Nullable<AuthorPermission>>(null);

  const selectedPermissionRef = useRef<Nullable<AuthorPermission>>(null);

  const continueDisabled = !selectedPermission;
  useFocusEffect(
    useCallback(() => {
      setFooterProps({
        showBackButton: false,
        disabled: continueDisabled,
        stepData: selectedPermissionRef.current,
      });
    }, [continueDisabled, setFooterProps]),
  );

  const {data, isLoading, isError} = useCursorInfinityQuery({
    queryKey: DRAFT_QUERY_KEYS.authors(AuthorType.FOR_CREATION),
    queryFn: ({cursor}) =>
      getAvailableAuthors({
        limit: REDUCED_LIMIT,
        cursor,
      }),
  });

  const onListRowPress = useCallback(
    (permission: AuthorPermission) => () => {
      selectedPermissionRef.current = permission;
      setSelectedPermission(permission);
    },
    [],
  );

  const renderItem = useCallback(
    ({item}: {item: AuthorPermission}) => (
      <ListRow style={styles.listRow} onPress={onListRowPress(item)}>
        <Radio
          checked={selectedPermission?.id === item.id}
          onPress={onListRowPress(item)}
        />
        <ListRow.Avatar url={item.userTo.profilePicture} />
        <ListRow.Title
          title={getCompleteName(item.userTo)}
          description={item.userTo.email}
        />
      </ListRow>
    ),
    [onListRowPress, selectedPermission],
  );

  return (
    <ScrollView
      contentContainerStyle={[styles.container]}
      style={{backgroundColor: theme.background.elements.grey}}>
      <Typography variant="m" weight="semiBold">
        {t('drafts.steps.author.title')}
      </Typography>
      <Typography>{t('drafts.steps.author.subtitle')}</Typography>
      <CardContainer style={styles.cardContainer}>
        <List
          scrollEnabled={false}
          data={data}
          isLoading={isLoading}
          isError={isError}
          keyExtractor={keyExtractor}
          renderItem={renderItem}
          emptyText={t('drafts.steps.author.empty')}
        />
      </CardContainer>
    </ScrollView>
  );
}

const MemorizedSelectAuthor = memo(SelectAuthor);
export {MemorizedSelectAuthor as SelectAuthor};