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

import { UserLoginLog } from "@/store/api/usersApi";
import { formatDate, formatTime } from "@/utils/dateUtils";
import { LogsTableHeader } from "@/components/features/logs/LogsTableHeader";
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";

interface DesktopLogsTableProps {
  logs: UserLoginLog[];
  sortColumn: string | null;
  sortDirection: TableSortDirection;
  onSort: (column: string) => void;
}

export const DesktopLogsTable = ({
  logs,
  sortColumn,
  sortDirection,
  onSort,
}: DesktopLogsTableProps) => {
  return (
    <DataTable>
      <LogsTableHeader
        sortColumn={sortColumn}
        sortDirection={sortDirection}
        onSort={onSort}
      />

      {logs.map((log) => (
        <DataTable.Row key={log.id}>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text numberOfLines={1}>{log.name}</Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text numberOfLines={1}>{log.email}</Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text numberOfLines={1}>
                {formatDate(log.lastLoginAt)} {formatTime(log.lastLoginAt)}
              </Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text numberOfLines={1}>{log.activity}</Text>
            </View>
          </DataTable.Cell>
        </DataTable.Row>
      ))}
    </DataTable>
  );
};