import React, {memo, useCallback, useState} from 'react';
import {ScrollView} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useFocusEffect} from '@react-navigation/native';
import {IconExclamationCircle} from '@tabler/icons-react-native';
import {
  CardContainer,
  List,
  ListEmpty,
  ListRow,
  Radio,
  RadioButton,
  Typography,
  useStepper,
} from '@components';
import {useCursorInfinityQuery} from '@hooks/queries/useCursorInfinityQuery';
import {useAsync} from '@hooks/useAsync';
import {DRAFT_QUERY_KEYS} from '@modules/drafts/constants';
import {getAvailableGroups, getFeedPermission} from '@modules/drafts/services';
import {GroupPermission} from '@modules/drafts/interfaces';
import {REDUCED_LIMIT} from '@services/constants';
import {getCompleteName, isFullLink} from '@shared/utils';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {Steps} from '../../../../interfaces';
import {styles} from './styles';

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

function Destiny() {
  const {setFooterProps, data} = useStepper<Steps>();
  const {theme} = useTheme();
  const {t} = useTranslation();
  const [postInFeed, setPostInFeed] = useState(false);
  const [groupSelected, setGroupSelected] =
    useState<Nullable<GroupPermission>>(null);

  const continueDisabled = !postInFeed && !groupSelected;

  useFocusEffect(
    useCallback(() => {
      setFooterProps(prev => ({
        ...prev,
        hidden: false,
        disabled: continueDisabled,
        showBackButton: true,
        nextLabel: t('general.continue'),
      }));
    }, [continueDisabled, setFooterProps, t]),
  );

  const selectedAuthorPermission = data.SELECT_AUTHOR!;
  const authorToName = getCompleteName(selectedAuthorPermission?.userTo);

  const {data: feedPermissionData} = useAsync({
    fn: () => getFeedPermission(selectedAuthorPermission.id),
  });

  const {
    data: groups,
    isLoading,
    isError,
  } = useCursorInfinityQuery({
    queryKey: DRAFT_QUERY_KEYS.draftGroups(selectedAuthorPermission?.id),
    queryFn: ({cursor}) =>
      getAvailableGroups({
        limit: REDUCED_LIMIT,
        cursor,
        permissionId: selectedAuthorPermission?.id,
      }),
  });

  const togglePostInFeed = () => {
    setFooterProps(prev => ({
      ...prev,
      stepData: {
        groupSelected: null,
        postInFeed: !postInFeed,
      },
    }));
    setPostInFeed(prev => !prev);
    setGroupSelected(null);
  };

  const onListRowPress = useCallback(
    (groupPermission: GroupPermission) => () => {
      setGroupSelected(groupPermission);
      setPostInFeed(false);
      setFooterProps(prev => ({
        ...prev,
        stepData: {
          groupSelected: groupPermission,
          postInFeed: false,
        },
      }));
    },
    [setFooterProps],
  );

  const renderItem = useCallback(
    ({item}: {item: GroupPermission}) => {
      const iconIsLink = isFullLink(item.icon);

      const avatarProps = {
        url: iconIsLink ? item.icon : undefined,
        emoji: iconIsLink ? undefined : item.icon,
      };

      return (
        <ListRow style={styles.listRow} onPress={onListRowPress(item)}>
          <Radio
            checked={groupSelected?.id === item.id}
            onPress={onListRowPress(item)}
          />
          <ListRow.Avatar {...avatarProps} />
          <ListRow.Title title={item.title} description={item.description} />
        </ListRow>
      );
    },
    [onListRowPress, groupSelected],
  );

  return (
    <ScrollView
      style={{backgroundColor: theme.background.elements.grey}}
      contentContainerStyle={styles.container}>
      <Typography variant="m" weight="semiBold">
        {t('drafts.steps.destiny.title')}
      </Typography>
      <Typography>{t('drafts.steps.destiny.subtitle')}</Typography>
      {!feedPermissionData?.canPostInFeed && !groups.length && !isLoading && (
        <ListEmpty
          IconComponent={<IconExclamationCircle size={ICON_SIZES.x16} />}
          title={t('drafts.steps.destiny.empty')}
          description={t('drafts.steps.destiny.empty_description')}
        />
      )}
      {feedPermissionData?.canPostInFeed && (
        <CardContainer style={styles.cardContainer}>
          <RadioButton
            checked={postInFeed}
            onPress={togglePostInFeed}
            title={t('drafts.steps.destiny.post_in_feed')}
          />
        </CardContainer>
      )}
      {groups.length && !isLoading ? (
        <CardContainer style={styles.cardContainer}>
          <Typography variant="m" weight="semiBold">
            {t('drafts.steps.destiny.groups_in_common', {author: authorToName})}
          </Typography>
          <List
            scrollEnabled={false}
            data={groups}
            isLoading={isLoading}
            isError={isError}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            style={styles.listContainer}
          />
        </CardContainer>
      ) : null}
    </ScrollView>
  );
}

const MemorizedDestiny = memo(Destiny);
export {MemorizedDestiny as Destiny};