infoalloggi-monorepo/apps/infoalloggi/src/components/tables/banners-table.tsx

import type { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
import { Cog } from "lucide-react";
import { DataTable } from "~/components/custom_ui/data-table";
import type { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import type { Banners } from "~/schemas/public/Banners";
export const BannersTable = (props: {
  data: Banners[];
  setOpenEdit: (status: boolean) => void;
  setEditData: (data: Banners | null) => void;
}) => {
  const { data, setOpenEdit, setEditData } = props;

  const tabledata = data.map((row) => {
    return {
      idbanner: row.idbanner,
      titolo: row.titolo,
      testo: row.testo,
      is_unskippable: row.is_unskippable,
      has_cta: row.has_cta,
      cta_href: row.cta_href,
      cta_icon: row.cta_icon,
      cta_text: row.cta_text,
      color: row.color,
      is_active: row.is_active,
      show_public: row.show_public,
      show_private: row.show_private,
      hide_duration: row.hide_duration,

      actions: "Azioni",
    };
  });

  const columns_titles = {
    idbanner: "Codice",
    titolo: "Titolo",
    testo: "Testo",
    is_unskippable: "Non saltabile",
    has_cta: "Ha link",
    hide_duration: "Durata",
    cta_href: "Indirizzo",
    cta_icon: "Icona",
    cta_text: "Testo",
    color: "Colore",
    is_active: "Attivo",
    actions: "Azioni",
    show_public: "Pubblico",
    show_private: "A. Riservata",
  };
  type Column = (typeof tabledata)[number];

  const columns: ColumnDef<Column>[] = [
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.idbanner}
        />
      ),
      accessorKey: "idbanner",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.titolo} />
      ),
      accessorKey: "titolo",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.testo} />
      ),
      accessorKey: "testo",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.is_unskippable}
        />
      ),
      accessorKey: "is_unskippable",
      cell: ({ row }) => {
        const data = row.original;
        return data.is_unskippable ? "Vero" : "Falso";
      },
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.has_cta} />
      ),
      accessorKey: "has_cta",
      cell: ({ row }) => {
        const data = row.original;
        return data.has_cta ? "Vero" : "Falso";
      },
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.hide_duration}
        />
      ),
      accessorKey: "hide_duration",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.cta_href}
        />
      ),
      accessorKey: "cta_href",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.cta_icon}
        />
      ),
      accessorKey: "cta_icon",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.cta_text}
        />
      ),
      accessorKey: "cta_text",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.color} />
      ),
      accessorKey: "color",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.is_active}
        />
      ),
      accessorKey: "is_active",
      cell: ({ row }) => {
        const data = row.original;
        return data.is_active ? "Vero" : "Falso";
      },
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.show_public}
        />
      ),
      accessorKey: "show_public",
      cell: ({ row }) => {
        const data = row.original;
        return data.show_public ? "Vero" : "Falso";
      },
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.show_private}
        />
      ),
      accessorKey: "show_private",
      cell: ({ row }) => {
        const data = row.original;
        return data.show_private ? "Vero" : "Falso";
      },
    },

    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.actions} />
      ),
      cell: ({ row }) => {
        const data = row.original;
        return (
          <Button
            aria-label="Edit Banner"
            variant="outline"
            onClick={() => {
              setEditData(data);
              setOpenEdit(true);
            }}
          >
            <div className="flex items-center gap-2">
              <Cog /> Modifica
            </div>
          </Button>
        );
      },
      accessorKey: "actions",
      enableHiding: false,
      enableSorting: false,
    },
  ];

  const searchFiltro: SearchFiltro = {
    columnName: "idbanner",
    placeholder: "Filtra codice...",
  };
  return (
    <div className="mx-auto w-full px-2 py-10">
      <DataTable
        columns={columns}
        data={tabledata}
        pinnedFiltri={undefined}
        searchColumn={searchFiltro}
        columns_titles={columns_titles}
        defaultSort={[{ desc: true, id: "idbanner" }]}
        defaultColumnVisibility={{
          idbanner: true,

          titolo: true,
          testo: true,
          is_unskippable: true,
          has_cta: true,
          hide_duration: false,
          cta_href: false,
          cta_icon: false,
          cta_text: false,
          color: false,
          is_active: true,
          actions: true,
          show_public: true,
          show_private: true,
        }}
      />
    </div>
  );
};