import { router } from "expo-router";
import { View } from "react-native";
import { Avatar, DataTable, Text } from "react-native-paper";

import { CustomCheckbox } from "@/components/ui/CustomCheckbox";
import { User } from "@/store/models/User.model";
import { SizeEnum } from "@/constants/sizeEnum";
import { RiskIndicator } from "@/components/ui/RiskIndicator";
import { UserActions } from "@/components/features/users/UserActions";
import { UserTableHeader } from "@/components/features/users/UserTableHeader";
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";

interface DesktopUserAccountsTableProps {
  users: User[];
  selectedUsers: string[];
  sortColumn: string | null;
  sortDirection: TableSortDirection;
  onSort: (column: string) => void;
  onSelectUser: (userId: string) => void;
  onEdit: (user: User) => void;
  onLock: (user: User) => void;
  onDelete: (user: User) => void;
}

export const DesktopUserAccountsTable = ({
  users,
  selectedUsers,
  sortColumn,
  sortDirection,
  onSort,
  onSelectUser,
  onEdit,
  onLock,
  onDelete,
}: DesktopUserAccountsTableProps) => {
  return (
    <View style={{ flex: 1 }}>
      <DataTable>
        <UserTableHeader
          sortColumn={sortColumn}
          sortDirection={sortDirection}
          onSort={onSort}
        />

        {users.map((user) => (
          <DataTable.Row key={user.id}>
            <DataTable.Cell>
              <View className="flex-row items-center pr-2">
                <View>
                  <CustomCheckbox
                    checked={selectedUsers.includes(user.id)}
                    onPress={() => onSelectUser(user.id)}
                  />
                </View>
                {user.imageUrl ? (
                  <Avatar.Image
                    source={{ uri: user.imageUrl }}
                    size={28}
                    style={{ marginRight: 10, marginLeft: 10 }}
                  />
                ) : (
                  <Avatar.Text
                    label={user.firstName.charAt(0) + user.lastName.charAt(0)}
                    size={28}
                    style={{ marginRight: 10, marginLeft: 10 }}
                  />
                )}
                <View className="flex-row items-center shrink px-1 py-1">
                  <Text
                    numberOfLines={10}
                    onPress={() => router.push(`/accounts/users/${user.id}`)}
                  >
                    {user.firstName + " " + user.lastName}
                  </Text>
                </View>
              </View>
            </DataTable.Cell>
            <DataTable.Cell style={{ justifyContent: "center" }}>
              <RiskIndicator risk={user.riskStatus} size={SizeEnum.Moderate} />
            </DataTable.Cell>
            <DataTable.Cell>
              <View className="flex-row items-center shrink px-1 py-1">
                <Text numberOfLines={10}>{user.email}</Text>
              </View>
            </DataTable.Cell>
            <DataTable.Cell>
              <View className="flex-row items-center shrink px-1 py-1">
                <Text numberOfLines={10}>{user.title}</Text>
              </View>
            </DataTable.Cell>
            <DataTable.Cell style={{ justifyContent: "center", width: 100 }}>
              <UserActions
                user={user}
                onView={(u) => router.push(`/accounts/users/${u.id}`)}
                onEdit={onEdit}
                onLock={onLock}
                onDelete={onDelete}
              />
            </DataTable.Cell>
          </DataTable.Row>
        ))}
      </DataTable>
    </View>
  );
};