import React, { useCallback } from 'react';
import { Button, Card, SafeScreen, Row, Divider, Text } from 'components';
import { Col } from 'components/layout';
import { Copy } from 'icons';
import { RootStackScreenProps } from 'navigation';
import { useTranslation } from 'react-i18next';
import { openInbox } from 'utils/email';
import { NavigationRoutes } from 'navigation/enum';
export const MagicLinkConfirm: React.FC<MagicLinkConfirmProps> = ({ route: { params } }) => {
  const { t } = useTranslation();

  const openMail = useCallback(() => {
    openInbox();
  }, []);

  return (
    <SafeScreen justifyContent="center" px="m">
      <Col justifyContent="center">
        <Card
          colorVariant="base-01"
          variant="plain"
          alignItems="center"
          sizeVariant="medium"
          width="100%"
        >
          <Text variant="heading">{t('magic-link-confirm.title')}</Text>
          <Col mt="s" alignItems="center" alignSelf="center">
            <Text variant="body">{t('magic-link-confirm.body1')}</Text>
            <Text variant="title">{params?.email}</Text>
            <Text mt="3xs" variant="body">
              {t('magic-link-confirm.body2')}
            </Text>
          </Col>
          <Row my="m">
            <Divider colorVariant="divider-01" size={1} directionVariant="horizontal" />
          </Row>
          <Text variant="caption" color="grey-08">
            {t('magic-link-confirm.verification-code')}
          </Text>
          <Button
            mt="s"
            variant="outline"
            sizeVariant="medium"
            alignSelf="center"
            centerElement={
              <Text variant="heading" color="body">
                {params?.verificationCode}
              </Text>
            }
            rightElement={<Copy height={15} />}
          />
        </Card>
        <Col mt="l">
          <Button
            onPress={openMail}
            colorVariant="primary"
            sizeVariant="large"
            flexGrow={1}
            titleColor="white"
            title={t('button.open-mail-app')}
          />
        </Col>
      </Col>
    </SafeScreen>
  );
};
type MagicLinkConfirmProps = RootStackScreenProps<NavigationRoutes.MagicLinkConfirm>;