import {
  Button,
  Colors,
  Dialog,
  Image,
  Picker,
  Text,
  TextField,
  View,
} from "react-native-ui-lib";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import {
  Dimensions,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { colorMap } from "@/constants/colorMap";
import Ionicons from "@expo/vector-icons/Ionicons";
import { AntDesign } from "@expo/vector-icons";
import React, { useState } from "react";
import * as Localization from "expo-localization";
import * as ImagePicker from "expo-image-picker";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import * as tz from "tzdata";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { useUpdateSubUser } from "@/hooks/firebase/useUpdateSubUser";

type Props = {
  open: boolean;
  handleClose: Function;
  profileData: UserProfile;
};
const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
  const [timeZone, setTimeZone] = useState<string>(
    profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
  );
  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
  const [firstName, setFirstName] = useState<string>(
    profileData?.firstName || ""
  );
  const [profileImage, setProfileImage] = useState<
    string | ImagePicker.ImagePickerAsset | null
  >(profileData?.pfp || null);

  const [selectedColor, setSelectedColor] = useState<string>(
    profileData?.eventColor ?? colorMap.pink
  );

  const { mutateAsync: updateUserData } = useUpdateUserData();
  const { mutateAsync: updateSubUser } = useUpdateSubUser();
  const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();

  const handleUpdateUserData = async () => {
    await updateSubUser({
      userProfile: {
        ...profileData,
        firstName,
        lastName,
        timeZone,
        eventColor: selectedColor,
      },
    });
    handleClose();
  };

  const pickImage = async () => {
    const permissionResult =
      await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      alert("Permission to access camera roll is required!");
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.canceled) {
      setProfileImage(result.assets[0].uri);
      await changeProfilePicture(result.assets[0]);
    }
  };

  const handleClearImage = async () => {
    await updateUserData({ newUserData: { pfp: null } });
    setProfileImage(null);
  };

  const pfpUri =
    profileImage && typeof profileImage === "object" && "uri" in profileImage
      ? profileImage.uri
      : profileImage;

  const handleChangeColor = (color: string) => {
    setSelectedColor(color);
  };

  const { width } = Dimensions.get("screen");
  return (
    <Dialog
      visible={open}
      height={"90%"}
      width={width}
      panDirection={PanningDirectionsEnum.DOWN}
      center
      onDismiss={() => handleClose}
      containerStyle={{
        borderRadius: 10,
        backgroundColor: "white",
        alignSelf: "stretch",
        padding: 0,
        paddingTop: 4,
        margin: 0,
      }}
    >
      <ScrollView style={{ flex: 1, display: "flex" }}>
        <View style={styles.dialogContent}>
          <View>
            <Text style={styles.title}>Update Profile</Text>
          </View>
          <View row spread paddingH-15 centerV marginV-15>
            <TouchableOpacity onPress={pickImage}>
              {pfpUri ? (
                <Image
                  key={pfpUri}
                  style={styles.pfp}
                  source={pfpUri ? { uri: pfpUri } : null}
                />
              ) : (
                <View
                  center
                  style={{
                    aspectRatio: 1,
                    width: 65.54,
                    backgroundColor: profileData?.eventColor ?? colorMap.pink,
                    borderRadius: 20,
                  }}
                >
                  <Text style={styles.pfpTxt}>
                    {profileData?.firstName?.at(0)}
                    {profileData?.lastName?.at(0)}
                  </Text>
                </View>
              )}
            </TouchableOpacity>

            <TouchableOpacity onPress={pickImage}>
              <Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
                {profileData?.pfp ? "Change" : "Add"} Photo
              </Text>
            </TouchableOpacity>

            {profileData?.pfp && (
              <TouchableOpacity onPress={handleClearImage}>
                <Text style={styles.photoSet}>Remove Photo</Text>
              </TouchableOpacity>
            )}
          </View>
          <View paddingH-15>
            <Text text80 marginT-10 marginB-7 style={styles.label}>
              First name
            </Text>
            <TextField
              text70
              placeholder="First name"
              style={styles.txtBox}
              value={firstName}
              onChangeText={async (value) => {
                setFirstName(value);
              }}
            />
            <Text text80 marginT-10 marginB-7 style={styles.label}>
              Last name
            </Text>
            <TextField
              text70
              placeholder="Last name"
              style={styles.txtBox}
              value={lastName}
              onChangeText={async (value) => {
                setLastName(value);
              }}
            />
            <Text text80 marginT-10 marginB-7 style={styles.label}>
              Email address
            </Text>
            <TextField
              editable={false}
              text70
              placeholder="Email address"
              value={profileData?.email?.toString()}
              style={styles.txtBox}
            />
          </View>
          <View paddingH-15 marginT-15>
            <Text style={styles.subTit}>Settings</Text>
            <Text style={styles.jakarta12}>Time Zone</Text>
            <View style={styles.viewPicker}>
              <Picker
                value={timeZone}
                onChange={(item) => setTimeZone(item as string)}
                showSearch
                floatingPlaceholder
                style={styles.inViewPicker}
                trailingAccessory={
                  <View
                    style={{
                      justifyContent: "center",
                      alignItems: "center",
                      height: "100%",
                      marginTop: -38,
                      paddingRight: 15,
                    }}
                  >
                    <Ionicons
                      name={"chevron-down"}
                      style={{ alignSelf: "center" }}
                      size={20}
                      color={"#000000"}
                    />
                  </View>
                }
              >
                {timeZoneItems}
              </Picker>
            </View>
          </View>
          <View paddingH-15 marginT-15 style={{ display: "flex", flexGrow: 1 }}>
            <Text style={styles.cardTitle} marginB-14>
              Color Preference
            </Text>
            <View row spread>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.pink)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.pink}>
                  {selectedColor == colorMap.pink && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.lightPink)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.lightPink}>
                  {selectedColor == colorMap.lightPink && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.orange)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.orange}>
                  {selectedColor == colorMap.orange && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.lightOrange)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.lightOrange}>
                  {selectedColor == colorMap.lightOrange && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.green)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.green}>
                  {selectedColor == colorMap.green && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
            </View>
            <View row spread marginT-10>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.lightGreen)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.lightGreen}>
                  {selectedColor == colorMap.lightGreen && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
                <View style={styles.colorBox} backgroundColor={colorMap.teal}>
                  {selectedColor == colorMap.teal && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.lightTeal)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.lightTeal}>
                  {selectedColor == colorMap.lightTeal && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => handleChangeColor(colorMap.purple)}
              >
                <View style={styles.colorBox} backgroundColor={colorMap.purple}>
                  {selectedColor == colorMap.purple && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPurple)}>
                <View style={styles.colorBox} backgroundColor={colorMap.lightPurple}>
                  {selectedColor == colorMap.lightPurple && (
                    <AntDesign name="check" size={30} color="white" />
                  )}
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View
          row
          center
          style={{
            display: "flex",
            gap: 10,
            alignItems: "flex-end",
            marginTop: 10,
          }}
        >
          <Button
            style={{
              backgroundColor: profileData.eventColor ?? colorMap.pink,
              justifyContent: "center",
            }}
            label="Save"
            onPress={handleUpdateUserData}
          />
          <Button
            style={{
              backgroundColor: "#9c978f",
              justifyContent: "center",
            }}
            label="Cancel"
            onPress={handleClose}
          />
        </View>
      </ScrollView>
    </Dialog>
  );
};

const timeZoneItems = Object.keys(tz.zones)
  .sort()
  .map((zone) => (
    <Picker.Item
      key={zone}
      label={zone.replace("/", " / ").replace("_", " ")}
      value={zone}
    />
  ));

const styles = StyleSheet.create({
  dialogContent: {
    paddingHorizontal: 10,
    paddingTop: 10,
    paddingBottom: 10,
    flexGrow: 1,
  },
  cardTitle: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  colorBox: {
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
    width: 51,
    borderRadius: 12,
  },
  card: {
    marginVertical: 15,
    backgroundColor: "white",
    width: "100%",
    borderRadius: 12,
    paddingHorizontal: 20,
    paddingVertical: 21,
  },
  pfpTxt: {
    fontFamily: "Manrope_500Medium",
    fontSize: 30,
    color: "white",
  },
  pfp: {
    aspectRatio: 1,
    width: 65.54,
    backgroundColor: "gray",
    borderRadius: 20,
  },
  txtBox: {
    backgroundColor: "#fafafa",
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#cecece",
    padding: 15,
    height: 45,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13,
  },
  subTit: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  title: {
    fontFamily: "Manrope_500Medium",
    fontSize: 20,
  },
  label: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 12,
    color: "#a1a1a1",
  },
  photoSet: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13.07,
  },
  jakarta12: {
    paddingVertical: 10,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 12,
    color: "#a1a1a1",
  },
  viewPicker: {
    borderRadius: 50,
    backgroundColor: Colors.grey80,
    marginBottom: 16,
    borderColor: Colors.grey50,
    borderWidth: 1,
    marginTop: 0,
    height: 40,
    zIndex: 10,
  },
  inViewPicker: {
    borderRadius: 50,
    paddingVertical: 12,
    paddingHorizontal: 16,
    marginBottom: 16,
    marginTop: -20,
    height: 40,
    zIndex: 10,
  },
});

export default UpdateUserDialog;