import React, {useCallback, useEffect, useState} from 'react';
import {FlatList, RefreshControl, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconFilter, IconProps} from '@tabler/icons-react-native';
import {
  Badge,
  BadgeElement,
  BasePost,
  Button,
  ListEmpty,
  ListRow,
  Pill,
  Post,
  Skeleton,
  Typography,
  HorizontalButtonGroup,
} from '@components';
import {useCursorInfinityQuery} from '@hooks/queries/useCursorInfinityQuery';
import {getMyDraftPosts} from '@modules/drafts/services';
import {DraftPost, DraftState} from '@modules/drafts/interfaces';
import DraftOptionsDialog from '@modules/drafts/screens/Drafts/components/DraftOptionsDialog';
import {getEmptyListProps} from '@modules/drafts/utils';
import {REDUCED_LIMIT} from '@services/constants';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {DRAFT_QUERY_KEYS, DRAFT_STATUS_VARIANT} from '../../../../constants';
import FilterDialog from '../FilterDialog';
import {styles} from './styles';

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

function SearchPosts({mine = false}: {mine?: boolean}) {
  const [draftOptionsDialogOpen, setDraftOptionsDialogOpen] =
    useState<Nullable<DraftPost>>(null);
  const [draftState, setDraftState] = useState<DraftState>(
    DraftState.InProgress,
  );
  const [draftButtonsOption, setDraftButtonsOption] = useState<
    DraftState.InProgress | DraftState.Approved
  >(DraftState.InProgress);
  const [filterModalOpen, setFilterModalOpen] = useState(false);
  const navigation = useNavigation();
  const {t} = useTranslation();
  const {theme} = useTheme();

  useEffect(() => {
    if (draftState === DraftState.Approved) {
      setDraftButtonsOption(DraftState.Approved);
    } else {
      setDraftButtonsOption(DraftState.InProgress);
    }
  }, [draftState]);

  const onCloseBottomModal = () => setFilterModalOpen(false);
  const onOpenBottomModal = () => setFilterModalOpen(true);

  const onCloseDraftOptionsDialog = () => setDraftOptionsDialogOpen(null);
  const onOpenDraftOptionsDialog = (draft: DraftPost) => () =>
    setDraftOptionsDialogOpen(draft);

  const {data, isLoading, isRefetching, refetch} = useCursorInfinityQuery({
    queryKey: DRAFT_QUERY_KEYS.draftPosts(draftState, mine),
    queryFn: ({cursor}) =>
      getMyDraftPosts({
        limit: REDUCED_LIMIT,
        cursor,
        state: draftState,
        mine,
      }),
  });

  const showFilterButton =
    draftState !== DraftState.InProgress || !!data.length;

  const onPressPost = useCallback(
    (draft: DraftPost) => () =>
      draft.state === DraftState.Approved
        ? draft.post.groupId
          ? navigation.navigate(Screens.GROUP_DETAIL, {
              groupId: draft.post.groupId,
            })
          : navigation.navigate(Screens.HOME, {topicId: undefined})
        : navigation.navigate(Screens.DRAFT_DETAILS, {draft, mine}),
    [mine, navigation],
  );

  const renderItem = useCallback(
    ({item}: {item: DraftPost}) => {
      const renderDescription = () => (
        <Pill text={item.post.group?.title || t('home.wall')} variant="info" />
      );

      return (
        <ListRow style={styles.listRowContainer}>
          <ListRow.CardContainer
            style={styles.cardContainer}
            badge={{
              text: t(`drafts.state.${item.state}`),
              variant: DRAFT_STATUS_VARIANT[item.state],
              hasIcon: item.state === DraftState.Overdue,
            }}>
            <Post
              post={
                {...item.post, user: item.draftPermission.userTo} as BasePost
              }
              renderDescription={renderDescription}
              creatorUser={mine ? undefined : item.draftPermission.userFrom}
              onPressPost={onPressPost(item)}
              withOptions={mine || item.state === DraftState.Approved}
              onPressOptions={
                item.state === DraftState.Approved
                  ? onPressPost(item)
                  : onOpenDraftOptionsDialog(item)
              }
              style={styles.postContainer}
            />
            {!mine && item.state !== DraftState.Approved && (
              <View
                style={[
                  styles.reviewButtonContainer,
                  {borderColor: theme.border.neutral.default},
                ]}>
                <Button
                  text={t('drafts.main.review')}
                  onPress={onPressPost(item)}
                  variant="secondary"
                />
              </View>
            )}
          </ListRow.CardContainer>
        </ListRow>
      );
    },
    [mine, onPressPost, t, theme.border.neutral.default],
  );

  const FilterRightIcon = useCallback(
    (props: IconProps) => (
      <BadgeElement>
        <IconFilter {...props} />
        <BadgeElement.BadgeContainer>
          <Badge show={draftState !== DraftState.InProgress} />
        </BadgeElement.BadgeContainer>
      </BadgeElement>
    ),
    [draftState],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <View
        style={[
          styles.content,
          {backgroundColor: theme.background.elements.grey},
        ]}>
        <HorizontalButtonGroup
          options={[
            {id: DraftState.InProgress, label: t('drafts.main.ongoing')},
            {id: DraftState.Approved, label: t('drafts.main.finished')},
          ]}
          selected={draftButtonsOption}
          onChange={setDraftState}
        />
        {draftState !== DraftState.Approved && (
          <View style={styles.filterContainer}>
            <Typography variant="m" weight="semiBold">
              {t('drafts.main.post')}
            </Typography>
            {showFilterButton ? (
              <Button
                onPress={onOpenBottomModal}
                text={t('drafts.main.filter')}
                variant="secondary"
                IconRight={FilterRightIcon}
                size="sm"
              />
            ) : null}
          </View>
        )}
        <FlatList
          keyExtractor={keyExtractor}
          data={data}
          showsVerticalScrollIndicator={false}
          renderItem={renderItem}
          contentContainerStyle={styles.listContainer}
          refreshControl={
            <RefreshControl refreshing={isRefetching} onRefresh={refetch} />
          }
          ListEmptyComponent={
            isLoading ? (
              <Skeleton style={styles.skeletonContainer}>
                <Skeleton.Item height={150} />
                <Skeleton.Item height={150} />
              </Skeleton>
            ) : (
              <ListEmpty {...getEmptyListProps(mine, draftState, t)} />
            )
          }
        />
      </View>
      <FilterDialog
        draftState={draftState}
        setDraftState={setDraftState}
        open={filterModalOpen}
        onClose={onCloseBottomModal}
      />
      <DraftOptionsDialog
        draft={draftOptionsDialogOpen}
        onClose={onCloseDraftOptionsDialog}
      />
    </View>
  );
}

export default SearchPosts;