import { View } from "react-native";
import { Avatar } from "react-native-paper";

import { User } from "@/store/models/User.model";
import { getInitials, getRoleLabel } from "@/utils/userUtils";
import { InfoRow } from "@/components/features/accounts/InfoRow";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

interface PersonalInfoProps {
  user: User;
  manager?: User | null;
}

export const PersonalInfo = ({ user, manager }: PersonalInfoProps) => {
  const isMobile = useAppSelector(selectIsMobile);
  const managerFullName =
    manager && manager?.firstName + " " + manager?.lastName;

  return (
    <View className="bg-lightGray rounded-md">
      <View className="flex-row items-center justify-between mb-4">
        <View className="flex-row items-center">
          {user.imageUrl ? (
            <Avatar.Image source={{ uri: user.imageUrl }} size={56} />
          ) : (
            <Avatar.Text
              label={getInitials(user.firstName, user.lastName)}
              size={50}
            />
          )}
        </View>
      </View>

      <View className={`gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
        <View className="flex-1">
          <InfoRow label="First Name" value={user.firstName || "-"} />
          <InfoRow label="Middle Name" value={user.middleName || "-"} />
          <InfoRow label="Last Name" value={user.lastName || "-"} />
        </View>

        <View className="flex-1">
          <InfoRow label="Email" value={user.email || "-"} />
          <InfoRow label="Phone Number" value={user.phoneNumber || "-"} />
          <InfoRow label="Department" value={user.department || "-"} />
        </View>

        <View className="flex-1">
          <InfoRow label="Role" value={getRoleLabel(user.role)} />
          <InfoRow label="Reports To" value={managerFullName || "-"} />
        </View>
      </View>
    </View>
  );
};