import BackButton from "@/components/BackButton";
import React from "react";
import { Card } from "@/components/ui/card";
import Screen from "@/components/Screen";
import { Heading } from "@/components/ui/heading";
import { AntDesign } from "@expo/vector-icons";
import { VStack } from "@/components/ui/vstack";
import { Text } from "@/components/ui/text";
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
import { LockIcon } from "@/components/ui/icon";

function truncateEmail(email: string) {
  const splitedEmail = email.split("@");
  let hiddenPart = splitedEmail[0][0];
  for (let i = 1; i < splitedEmail[0].length - 1; i++) {
    hiddenPart += "⋆";
  }
  return hiddenPart + splitedEmail[0].slice(-1) + "@" + splitedEmail[1];
}

type props = { email?: string };

export default function CodeSentPage({ email }: props) {
  return (
    <Screen>
      <BackButton icon="close" link={"/login"} action="primary" />
      <Card className="rounded-3xl mt-16">
        <VStack space="lg">
          <AntDesign
            className="bg-green-100 p-4 rounded-3xl h-16 w-16 self-center"
            name="check"
            size={30}
            color={"green"}
          />
          <Heading className="text-center" size="3xl">
            Code envoyé !
          </Heading>
          <VStack space="md">
            <Text className="text-center" size="xl">
              Nous t'avons envoyé le code de vérification à
            </Text>
            <Text className="text-center" size="2xl" bold={true}>
              {truncateEmail(email ?? "test@Optifit.com")}
            </Text>
            <Text className="text-center" size="xl">
              Clique sur renvoyer si tu n'as pas reçu d’ici quelques secondes !
              🔥
            </Text>
          </VStack>
          <Button size="xl" action="secondary">
            <ButtonIcon as={LockIcon} />
            <ButtonText>Renvoyer le code</ButtonText>
          </Button>
        </VStack>
      </Card>
    </Screen>
  );
}