"use client";
import { ColumnDef } from "@tanstack/react-table";
import { MdDelete } from "react-icons/md";
import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
export type Address = {
  uuid: string;
  address_line: string;
  post_code: string;
  city: string;
  district: string;
  division: string;
  is_default: boolean;
  profile_id: number;
};

import DefaultAddressRadioButton from "./DefaultAddressRadioButton"; 

export const columns: ColumnDef<Address>[] = [
  {
    id: "actions",
    header: "Sl",
    cell: ({ row }) => row.index + 1,
  },
  {
    accessorKey: "address_line",
    header: "Address Line",
  },
  {
    accessorKey: "city",
    header: "City",
  },
  {
    accessorKey: "post_code",
    header: "Post Code",
  },
  {
    accessorKey: "district",
    header: "District",
  },
  {
    accessorKey: "division",
    header: "Division",
  },
  {
    id: "defaultActions",
    header: "Default",
    cell: ({ row, table }) => {
      const address = row.original;
      const { updateDefaultAddress } = table.options.meta as {
        updateDefaultAddress: (
          addressId: string,
          profileId: number
        ) => Promise<void>;
      };

      return (
        <DefaultAddressRadioButton
          addressId={address.uuid}
          profileId={address.profile_id}
          isDefault={address.is_default}
          updateDefaultAddress={updateDefaultAddress}
        />
      );
    },
  },
  {
    id: "deleteAction",
    header: "Delete",
    cell: ({ row, table }) => {
      const address = row.original;
      const { deleteAddress } = table.options.meta as {
        deleteAddress: (addressId: string) => Promise<void>;
      };

      return (
        <div className="flex justify-end">
          <Button
            onClick={() => deleteAddress(address.uuid)}
            className="bg-red-600 text-white hover:bg-primary"
          >
            <MdDelete className="text-[1.1rem]" />
          </Button>
        </div>
      );
    },
  },
];