/* eslint-disable react/display-name */
import React from "reactn";
import { Pressable, Text, View } from "react-native";

import Page from "../layouts/Page.js";
import { background } from "../assets/index.js";
import { Input } from "../components/Input.js";
import GradientButton from "../components/GradientButton.js";
import Palette from "../styles/Palette.js";
import { FONT_FAMILY } from "../styles/Fonts.js";
import { navigate } from "../navigation/NavigationService.js";
import { Routes } from "../navigation/Routes.js";
import ItemContainer from "../components/ItemContainer/ItemContainer.js";

export default ({ navigation }) => {
  return (
    <Page
      backgroundImg={background.homeBG}
      headerType="NAVIGATION"
      title="Connexion"
    >
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ItemContainer height={490}>
          <View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
            <View style={{ gap: 2 }}>
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                }}
              >
                Bonjour, pseudo!
              </Text>
              <Text
                style={{
                  fontSize: 14,
                  color: Palette.gray,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre
                le rythme ?
              </Text>
            </View>
            <View style={{ gap: 20 }}>
              <Input
                placeholder="Adresse mail ou pseudo"
                label="Adresse mail ou pseudo"
                isBlur
              />
              <View style={{ gap: 4 }}>
                <Input
                  placeholder="Mot de passe"
                  label="Mot de passe"
                  type="password"
                  isBlur
                />
                <Pressable>
                  <Text
                    style={{
                      fontSize: 12,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                    }}
                  >
                    Mot de passe oublié?
                  </Text>
                </Pressable>
              </View>
            </View>
            <GradientButton
              title="Poursuivre la création"
              containerStyle={{
                width: "80%",
                alignSelf: "center",
              }}
              onPress={() => navigate(Routes.BottomTab)}
            />
            <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.Register)}>
                <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>
  );
};
