import React, {useCallback, useMemo, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useForm} from 'react-hook-form';
import {z} from 'zod';
import {IconMail} from '@tabler/icons-react-native';
import {zodResolver} from '@hookform/resolvers/zod';
import {Dialog, Typography} from '@components';
import {useInstance} from '@redux/selectors';

import {useInviteDialog} from '../../hooks/useInviteDialog';
import InviteForm from './components/InviteForm';

interface Props {
  isInviteDialogVisible: boolean;
  onCloseInviteDialog: () => void;
}

export type FormValues = {email: string};

export function InviteDialog({
  isInviteDialogVisible,
  onCloseInviteDialog,
}: Props) {
  const {t} = useTranslation();
  const {name, id} = useInstance();
  const [showResetValidation, setShowResetValidation] = useState(false);
  const schema = z.object({
    email: z
      .string({required_error: t('users.invitation.email_input_error')})
      .email(t('users.invitation.email_format_error')),
  });
  const methods = useForm<FormValues>({
    resolver: zodResolver(schema),
    mode: 'onChange',
  });

  const onCancel = useCallback(() => setShowResetValidation(false), []);

  const onClose = useCallback(() => {
    methods.reset();
    onCancel();
    onCloseInviteDialog();
  }, [methods, onCancel, onCloseInviteDialog]);

  const {
    onSendInvitationMutation,
    isSendingInvitation,
    onGetInviteCode,
    isGettingCode,
    onInvalidLink,
    isInvalidating,
  } = useInviteDialog({onClose, onCancel});

  const onSendInvitation = useCallback(
    (data: FormValues) => onSendInvitationMutation([data.email]),
    [onSendInvitationMutation],
  );

  const onInviteWithLink = () => onGetInviteCode(id);

  const onResetLink = useCallback(() => onInvalidLink(id), [id, onInvalidLink]);

  const onPressResetLink = useCallback(() => setShowResetValidation(true), []);

  const {handleSubmit, formState} = methods;
  const footer = useMemo(
    () =>
      showResetValidation
        ? {
            primaryButton: {
              text: t('users.invitation.reset_link'),
              onPress: onResetLink,
              isLoading: isInvalidating,
            },
            secondaryButton: {
              text: t('general.cancel'),
              onPress: onCancel,
            },
          }
        : {
            primaryButton: {
              text: t('users.invitation.send_invitation'),
              onPress: handleSubmit(onSendInvitation),
              IconLeft: IconMail,
              isLoading: isSendingInvitation,
              disabled: !formState.isValid,
            },
          },
    [
      showResetValidation,
      t,
      onResetLink,
      isInvalidating,
      onCancel,
      onSendInvitation,
      isSendingInvitation,
      handleSubmit,
      formState.isValid,
    ],
  );

  return (
    <Dialog
      isVisible={isInviteDialogVisible}
      onClose={onClose}
      withBackButton={showResetValidation}
      onGoBack={onCancel}
      title={t(
        showResetValidation
          ? 'users.invitation.reset_link_modal_title'
          : 'users.invitation.invite_people',
      )}
      footer={footer}>
      {showResetValidation ? (
        <Typography>
          {t('users.invitation.reset_link_modal_description', {
            instanceName: name,
          })}
        </Typography>
      ) : (
        <InviteForm
          onPressResetLink={onPressResetLink}
          onInviteWithLink={onInviteWithLink}
          isGettingCode={isGettingCode}
          methods={methods}
        />
      )}
    </Dialog>
  );
}