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

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

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)} {formatTimeWithSeconds(log.lastLoginAt)}
              </Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text
                numberOfLines={1}
                style={{ color: log.status === "FAILURE" ? "#F83434" : "#22C927" }}
              >
                {log.activity}
                {log.status === "FAILURE" && reasonLabel(log.failureReason)
                  ? ` - ${reasonLabel(log.failureReason)}`
                  : ""}
              </Text>
            </View>
          </DataTable.Cell>
        </DataTable.Row>
      ))}
    </DataTable>
  );
};