import React from "react";
import {
  Button,
  Card,
  Dialog,
  Text,
  TouchableOpacity,
} from "react-native-ui-lib";
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";

const UserMenu = ({
  user,
  showQRCodeDialog,
  setShowQRCodeDialog,
}: {
  user: UserProfile;
  showQRCodeDialog: boolean;
  setShowQRCodeDialog: (value: string | boolean) => void;
}) => {
  const {user: currentUser} = useAuthContext();

  const handleShowQRCode = () => {
    setShowQRCodeDialog(user.uid!);
  };

  const getQRCodeText = () => {
    if (user.userType === ProfileType.FAMILY_DEVICE) {
      return "Open Cally on the family device and scan the code to link it to your family group";
    }
    
    if (currentUser?.uid === user.uid) {
      return "To connect another device to your profile, open the Cally app on that device and scan this QR code.";
    }
    
    return `To connect ${user.firstName}'s device to your Family Group, open the Cally app on their device and scan the QR code.`;
  };

  return (
    <>
      <TouchableOpacity onPress={handleShowQRCode}>
        <Ionicons name="qr-code-outline" size={24} color="black" />
      </TouchableOpacity>

      <Dialog
        visible={showQRCodeDialog}
        onDismiss={() => setShowQRCodeDialog(false)}
        panDirection={PanningDirectionsEnum.DOWN}
      >
        <Card padding-20 center>
          <Text
            center
            marginT-15
            marginH-15
            marginB-25
            style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
          >
            {getQRCodeText()}
          </Text>
          <QRCode value={user.uid!} size={150} />
          <Button
            marginT-20
            style={styles.button}
            label="Close"
            labelStyle={{
              fontFamily: "PlusJakartaSans_500Medium",
              fontSize: 15,
            }}
            onPress={() => setShowQRCodeDialog(false)}
          />
        </Card>
      </Dialog>
    </>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#d9d9d9",
    width: 117,
    height: 47,
  },
});

export default UserMenu;