/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from "./user-row.module.scss"
import { formatDate } from "@/lib/utils/format-date"
import { truncateEmail } from "@/lib/utils/truncate-email"
import { formatMoneyComplete } from "@/lib/utils/format-money"
import { usePage } from "@inertiajs/react"

import currencyData from "../../../../data/countries-currencies.json";

interface UserTableRowProps {
  user: {
    id: string | number
    name: string
    email: string
    isActive?: boolean
    created_at?: string
    balance: number;
    is_account_active: boolean
  }
}

const UserTableRow: React.FC<UserTableRowProps> = ({ user }) => {
  const { id, name, email, created_at, balance, is_account_active } = user

  const {appSettings} = usePage().props as any

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

  console.log(user)

  const handleClicked = (id: string | number) => {
    window.location.href = `/admin/users/${id}`
  }

  return (
    <div className={styles["user__row"]}>
      <div>{name}</div>
      <div>{truncateEmail(email)}</div>
      <div>{currency?.currency_symbol}{formatMoneyComplete(balance)}</div>
      <div>{formatDate(created_at) || "N/A"}</div>
      <div
          className={
            is_account_active
              ? styles["user__row--active"]
              : styles["user__row--notactive"]
          }
        >
          {is_account_active ? "Active" : "Not Active"}
      </div>
      <div
        onClick={() => handleClicked(id)}
        className={styles["user__row--manage"]}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => e.key === "Enter" && handleClicked(id)}
      >
        Manage
      </div>
    </div>
  )
}

export default UserTableRow