import { View, Text, Pressable } from "react-native";
import React, { useState } from "react";
import Page from "../layouts/Page";
import { background } from "../assets";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { Input } from "../components/Input";
import BorderGradientButton from "../components/BorderGradientButton";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";
import ItemContainer from "../components/ItemContainer/ItemContainer";

const Register = () => {
  const [email, setEmail] = useState("");

  return (
    <Page
      backgroundImg={background.homeBG}
      headerType="NAVIGATION"
      title="Inscription"
    >
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ItemContainer height={360}>
          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
            <Text
              style={{
                fontSize: 22,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterSemiBold,
              }}
            >
              Saisis ton adresse mail pour commencer
            </Text>
            <Input
              placeholder="Adresse mail"
              label="Adresse mail"
              isBlur
              type="email"
              value={email}
              setValue={setEmail}
            />
            <BorderGradientButton
              title="Créer mon compte"
              containerStyle={{
                width: "80%",
                alignSelf: "center",
              }}
              onPress={() => navigate(Routes.CreatePassword, { email })}
              disabled={!email}
            />
            <View
              style={{
                alignItems: "center",
                gap: 4,
              }}
            >
              <Text
                style={{
                  fontSize: 12,
                  color: Palette.gray,
                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                  textAlign: "center",
                }}
              >
                En t’inscrivant, tu acceptes nos conditions générales{"\n"}
                d’utilisation et notre politique de confidentialité.
              </Text>
              <Pressable onPress={() => navigate(Routes.Login)}>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                  }}
                >
                  Tu as déjà un compte?{" "}
                  <Text
                    style={{
                      fontFamily: FONT_FAMILY.InterSemiBold,
                    }}
                  >
                    Se connecter
                  </Text>
                </Text>
              </Pressable>
            </View>
          </View>
        </ItemContainer>
      </View>
    </Page>
  );
};

export default Register;
