import { View, Text, StyleSheet } from "react-native";
import { useEditProfile } from "../../hooks/useEditProfile";
import { Controller } from "react-hook-form";
import { useAuth } from "../../contexts/auth_context";
import { CustomTextInput } from "../../components/text_input/text_input";
import Checkbox from "expo-checkbox";
import { useState } from "react";
import { TouchableOpacity } from "@gorhom/bottom-sheet";
import { LIGTHT_THEME } from "../../constants/theme";
import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";
import { MaterialIcons } from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
//TODO: delete this line and import the correct CircleAvatar component
const avatarSource = require("../../../assets/avatar.png");

export const EditProfilePage = () => {
  const { user } = useAuth();
  const { onSubmit, control, pickProfileImage, profileImage } =
    useEditProfile();

  const { name, lastName } = user!;

  return (
    <ScrollView
      contentContainerStyle={{
        alignItems: "center",
        gap: 20,
        padding: 20,
        backgroundColor: LIGTHT_THEME.color.white,
      }}
    >
      <TouchableOpacity onPress={pickProfileImage}>
        <CircleAvatar
          source={profileImage ? { uri: profileImage } : avatarSource}
          size={100}
        />
        <MaterialIcons
          name="add-photo-alternate"
          size={40}
          color={LIGTHT_THEME.color.primary}
          style={{
            position: "absolute",
            bottom: -10,
            right: -10,
          }}
        />
      </TouchableOpacity>
      <View style={{ height: 30 }} />
      <Controller
        control={control}
        name="name"
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            onChangeText={onChange}
            onBlur={onBlur}
            value={value}
            label="Name"
            errors={errors.name?.message}
          />
        )}
        rules={{ required: "Name is required" }}
        defaultValue={name}
      />
      <Controller
        control={control}
        name="lastName"
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            onChangeText={onChange}
            onBlur={onBlur}
            value={value}
            label="Last name"
            errors={errors.lastName?.message}
          />
        )}
        rules={{ required: "Last name is required" }}
        defaultValue={lastName}
      />
      <TouchableOpacity onPress={onSubmit} style={styles.saveBtn}>
        <Text style={styles.saveBtnText}>Save</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  saveBtn: {
    backgroundColor: LIGTHT_THEME.color.primary,
    height: 40,
    width: 100,
    padding: 10,
    borderRadius: 20,
    alignItems: "center",
  },
  saveBtnText: {
    color: "white",
    fontWeight: "bold",
  },
});
