import React, {memo, useState} from 'react';
import {TouchableOpacity, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {Screens, windowDimensions} from '@shared/constants';
import {SHARED_STRINGS} from '@shared/strings';
import {COLORS} from '@shared/colors';
import ScrollviewDialog, {
  ScrollviewDialogProps,
} from '@components/ScrollviewDialog';
import UsersSectionList from '@components/UsersSectionList';
import {
  PostsSegmentationUsers,
  SegmentationUser,
} from '@interfaces/segmentation';
import Icon from '@components/Icon';
import Text from '@components/Text';
import ActivityIndicator from '@components/ActivityIndicator';
import {useAppSelector} from '@redux/utils';
import {Tabs} from '@modules/post/constants';

import {styles} from './styles';
import SegmentationItemsList, {
  SegmentationItemsListProps,
} from './components/SegmentationItemsList';

const CONTAINER_MAX_HEIGHT: number = windowDimensions.height * 0.6;

interface SegmentationDialogProps
  extends Pick<
      SegmentationItemsListProps,
      'segmentationItems' | 'setSegmentationItems'
    >,
    Pick<ScrollviewDialogProps, 'onTouchOutside'> {
  showSegmentationDialog?: boolean;
  segmentationUsers: PostsSegmentationUsers;
  getMoreSegmentationUsers: (page: number) => void;
  hideSegmentationDialog: () => void;
  loadingSegmentationItems?: boolean;
  navigateToEditScreen: () => void;
  comesFromPostComponent?: boolean;
}

function SegmentationDialog({
  showSegmentationDialog,
  segmentationUsers,
  getMoreSegmentationUsers,
  hideSegmentationDialog,
  segmentationItems,
  loadingSegmentationItems,
  setSegmentationItems,
  onTouchOutside,
  navigateToEditScreen,
  comesFromPostComponent,
}: SegmentationDialogProps) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const loading = useAppSelector(({posts}) => posts.loadingSegmentationUsers);
  const loadingMore = useAppSelector(
    ({posts}) => posts.loadingMoreSegmentationUsers,
  );
  const [selectedTab, setSelectedTab] = useState(Tabs.FIRST);

  const handleTabPress = (tab: Tabs) => () => setSelectedTab(tab);

  const handleAcceptPress = () => {
    comesFromPostComponent && navigateToEditScreen();
    hideSegmentationDialog();
  };

  const handleUserPress = (item: SegmentationUser) => {
    hideSegmentationDialog();
    navigation.navigate(Screens.PROFILE, {userId: item.id});
  };

  return (
    <ScrollviewDialog
      disableScroll
      visible={showSegmentationDialog}
      paddingHorizontal={0}
      showScrollIndicator={false}
      maxHeight={CONTAINER_MAX_HEIGHT}
      onTouchOutside={onTouchOutside}
      {...(comesFromPostComponent && {
        onAccept: hideSegmentationDialog,
        acceptText: t(SHARED_STRINGS.ACCEPT).toUpperCase(),
        acceptButtonColor: COLORS.BLACK,
      })}>
      <View style={styles.popupHeaderContainer}>
        <View style={styles.segmentationImageContainer}>
          <Icon
            name="groupsFill"
            color={COLORS.BLACK}
            style={styles.audienceIcon}
          />
          <Text variant="h6" style={styles.segmentationText}>
            {t('post.segmentation')}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.popupAcceptButton}
          onPress={handleAcceptPress}>
          <Text>
            {t(comesFromPostComponent ? 'post.edit' : SHARED_STRINGS.ACCEPT)}
          </Text>
        </TouchableOpacity>
      </View>
      <View style={styles.popupOptionsContainer}>
        <TouchableOpacity
          onPress={handleTabPress(Tabs.FIRST)}
          style={[
            styles.tabContainer,
            {
              borderBottomColor:
                selectedTab === Tabs.FIRST ? COLORS.BLACK : COLORS.DARK_GRAY,
            },
          ]}>
          <Text
            variant="h6"
            style={[styles.segmentationText, styles.groupsText]}>
            {t(SHARED_STRINGS.GROUPS)}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={handleTabPress(Tabs.SECOND)}
          style={[
            styles.tabContainer,
            {
              borderBottomColor:
                selectedTab === Tabs.SECOND ? COLORS.BLACK : COLORS.DARK_GRAY,
            },
          ]}>
          <View
            style={[
              styles.segmentationTagContainer,
              styles.segmentationContainer,
            ]}>
            <Text style={styles.segmentationTagText}>{`${t('post.scope')}: ${
              segmentationUsers.count
            } ${t(SHARED_STRINGS.USERS)}`}</Text>
          </View>
        </TouchableOpacity>
      </View>
      {selectedTab === Tabs.FIRST ? (
        loadingSegmentationItems ? (
          <ActivityIndicator style={styles.emptyStyle} />
        ) : (
          <SegmentationItemsList
            segmentationItems={segmentationItems}
            setSegmentationItems={setSegmentationItems}
            disabled={comesFromPostComponent}
          />
        )
      ) : (
        <View style={styles.userSectionListContainer}>
          <UsersSectionList
            contentContainerStyle={styles.userListContainer}
            loading={loading}
            loadingMore={loadingMore}
            users={segmentationUsers.users}
            onPress={handleUserPress}
            getMoreUsers={getMoreSegmentationUsers}
            emptyStyle={styles.emptyStyle}
          />
        </View>
      )}
    </ScrollviewDialog>
  );
}

export default memo(SegmentationDialog);