import { View, Text, Image, TextInput } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { gutters, Palette } from "../../styles";
import { BlurView } from "expo-blur";
import Style, { size } from "../../styles/Style";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { goBack } from "../../navigation/NavigationService";
import EditInput from "./components/EditInput";

const EditProfile = () => {
  return (
    <Page
      headerType="NAVIGATE"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
      containerStyle={{
        backgroundColor: "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={20}
          style={{
            paddingVertical: 14,
            backgroundColor: Palette.glass,
            paddingHorizontal: 20,
            borderRadius: 20,
            overflow: "hidden",
            gap: 24,
          }}
        >
          <View style={{ alignItems: "center" }}>
            <Image
              source={img.profile}
              style={{
                ...size({ size: 108 }),
                borderRadius: 100,
              }}
            />
            <Text
              style={{
                fontSize: 14,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterRegular,
              }}
            >
              Modifier la photo
            </Text>
          </View>
          <EditInput label="Pseudo" placeholder="Pseudo" />

          <GradientButton
            title="Enregistrer les modifications"
            containerStyle={{
              width: "80%",
              alignSelf: "center",
            }}
            onPress={goBack}
          />
        </BlurView>
      </View>
    </Page>
  );
};

export default EditProfile;
