import type { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";

import { Button } from "~/components/ui/button";
import { Cog } from "lucide-react";
import type { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
import { DataTable } from "~/components/custom_ui/data-table";
import type { Annunci } from "~/schemas/public/Annunci";
import Link from "next/link";
import { StatusBadge } from "~/pages/area-riservata/admin/edit-annuncio/[id]";
export const AnnunciTable = ({
  data,
}: {
  data: Pick<
    Annunci,
    "id" | "codice" | "titolo_it" | "comune" | "tipo" | "locatore" | "stato"
  >[];
}) => {
  const tabledata = data.map((row) => {
    return {
      id: row.id,
      codice: row.codice,
      titolo_it: row.titolo_it,
      comune: row.comune,
      tipo: row.tipo,
      locatore: row.locatore,
      stato: row.stato,
      actions: "Azioni",
    };
  });

  const columns_titles = {
    codice: "Codice",
    titolo_it: "Titolo",
    comune: "Comune",
    tipo: "Tipo",
    locatore: "Locatore",
    stato: "Stato",
    actions: "Azioni",
  };
  type Column = (typeof tabledata)[number];
  const columns: ColumnDef<Column>[] = [
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.codice} />
      ),
      accessorKey: "codice",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.titolo_it}
        />
      ),
      accessorKey: "titolo_it",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.comune} />
      ),

      accessorKey: "comune",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.tipo} />
      ),
      accessorKey: "tipo",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.locatore}
        />
      ),
      accessorKey: "locatore",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.stato} />
      ),
      cell: ({ row }) => {
        return <StatusBadge status={row.original.stato} />;
      },
      accessorKey: "stato",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.actions} />
      ),
      cell: ({ row }) => {
        return (
          <Link
            aria-label="Edit Annuncio"
            href={`/area-riservata/admin/edit-annuncio/${row.original.id}`}
            target="_blank"
          >
            <Button className="flex items-center gap-2 px-2" variant="ghost">
              <Cog />
            </Button>
          </Link>
        );
      },
      accessorKey: "actions",
      enableHiding: false,
      enableSorting: false,
    },
  ];

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