import { Link } from "react-router";
import { t as i18nT } from "i18next";
import UserBadge from "~/components/core/users/UserBadge";
import CheckIcon from "~/components/ui/icons/CheckIcon";
import XIcon from "~/components/ui/icons/XIcon";
import TableSimple from "~/components/ui/tables/TableSimple";
import { useLocaleFormatters } from "~/locale/format";
import type { IGetSubscribersData } from "../services/.server/NotificationService";
import { adminPath } from "~/utils/app/CanonicalUrlUtils";

export default function NotificationSubscribersTable({ items }: { items: IGetSubscribersData | null }) {
  const formatters = useLocaleFormatters();

  return (
    <TableSimple
      items={items?.data ?? []}
      pagination={{
        page: (items?.page ?? 0) + 1,
        pageSize: items?.pageSize ?? 0,
        totalItems: items?.totalCount ?? 0,
        totalPages: Math.ceil((items?.totalCount ?? 0) / (items?.pageSize ?? 0)),
      }}
      headers={[
        {
          name: "subscriber",
          title: i18nT("notifications.admin.subscribers.columns.subscriber"),
          value: (i) => (
            <div>
              {!i.email ? (
                <div>-</div>
              ) : (
                <Link to={adminPath("notifications/messages?subscriberId=" + i.subscriberId, { mode: "host-aware" })}>
                  <UserBadge
                    item={{
                      id: i.subscriberId,
                      email: i.email,
                      firstName: i.firstName,
                      lastName: i.lastName,
                    }}
                  />
                </Link>
              )}
            </div>
          ),
        },
        { name: "createdAt", title: i18nT("notifications.admin.subscribers.columns.createdAt"), value: (i) => formatters.relativeDate(i.createdAt) },
        { name: "updatedAt", title: i18nT("notifications.admin.subscribers.columns.updatedAt"), value: (i) => formatters.relativeDate(i.updatedAt) },
        {
          name: "deleted",
          title: i18nT("notifications.admin.subscribers.columns.deleted"),
          value: (i) => <div>{i.deleted ? <CheckIcon className="text-theme-500 h-4 w-4" /> : <XIcon className="text-muted-foreground h-4 w-4" />}</div>,
        },
      ]}
    ></TableSimple>
  );
}