import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  BottomModalFooter,
  BottomModalFooterProps,
  Dialog,
  Typography,
} from '@components';
import {useConversationActions} from '@modules/chats/hooks';
import {isCurrentUserTheOnlyAdmin} from '@modules/chats/db';

import {styles} from './styles';

export function OnlyAdminWarning({onClose}: {onClose: () => void}) {
  const {t} = useTranslation();
  const footer = useMemo(
    (): BottomModalFooterProps => ({
      primaryButton: {
        onPress: onClose,
        text: t('general.close'),
        variant: 'tertiary',
      },
    }),
    [onClose, t],
  );
  return (
    <View style={styles.contentContainer}>
      <Typography>
        {t('chat.groups.manage.assign_admin_description')}
      </Typography>
      <BottomModalFooter footer={footer} style={styles.footerContainer} />
    </View>
  );
}

export function LeaveGroupConfirmation({
  channel,
  onCancel,
  onSuccess,
}: {
  channel: string;
  onCancel: () => void;
  onSuccess?: () => void;
}) {
  const {t} = useTranslation();
  const {leaveGroup} = useConversationActions();

  const onConfirmPress = useCallback(() => {
    leaveGroup({channel, onSuccess});
  }, [channel, leaveGroup, onSuccess]);

  const footer = useMemo(
    (): BottomModalFooterProps => ({
      primaryButton: {
        onPress: onConfirmPress,
        text: t('general.exit'),
      },
      secondaryButton: {
        onPress: onCancel,
        text: t('general.cancel'),
        variant: 'tertiary',
      },
    }),
    [onCancel, onConfirmPress, t],
  );

  return (
    <View style={styles.contentContainer}>
      <Typography>{t('chat.groups.leave_group_description')}</Typography>
      <BottomModalFooter footer={footer} style={styles.footerContainer} />
    </View>
  );
}

interface Props {
  channel: string;
  channelName: string;
  isVisible: boolean;
  onClose: () => void;
}

export function DialogLeaveGroup({
  channel,
  isVisible,
  onClose,
  channelName,
}: Props) {
  const [showOnlyAdminWarning, setShowOnlyAdminWarning] = useState(false);
  const {t} = useTranslation();
  const dialogTitle = showOnlyAdminWarning
    ? t('chat.groups.manage.assign_admin')
    : t('chat.groups.leave_group_question', {
        name: channelName || '',
      });

  /**
   * Check if the current user is the only admin of the group.
   * In that case, when dialog will be opened, it will show a warning instead of the confirmation.
   */
  useEffect(() => {
    isCurrentUserTheOnlyAdmin(channel)
      .then(setShowOnlyAdminWarning)
      .catch(() => {});
  }, [channel]);

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={dialogTitle}
      withCloseButton={false}>
      {showOnlyAdminWarning ? (
        <OnlyAdminWarning onClose={onClose} />
      ) : (
        <LeaveGroupConfirmation
          channel={channel}
          onCancel={onClose}
          onSuccess={onClose}
        />
      )}
    </Dialog>
  );
}