import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { ColumnDef } from '@tanstack/react-table';
import { ArrowUpDown, MoreHorizontal } from 'lucide-react';

export type Members = {
  // id: number;
  username: number;
  fullname: string;
  group: string;
  email: string;
  created_at: Date;
};

export const columns: ColumnDef<Members>[] = [
  {
    accessorKey: 'no',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          No
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'username',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Username
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'name',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Fullname
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'group_name',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Group
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'email',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Email
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'created_at',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Created Date
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
  },
  {
    id: 'actions',
    cell: ({ row }) => {
      const dataMembers = row.original;

      return (
        <DropdownMenu>
          {/* <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger> */}
          {/* <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(dataMembers.id.toString())}
            >
              Copy account ID
            </DropdownMenuItem>
          </DropdownMenuContent> */}
        </DropdownMenu>
      );
    }
  }
];

export const initialMember = {
  id: '',
  fullname: '',
  email: '',
  username: '',
  msisdn: '',
  password: '',
  pin: '',
  try_pin: '',
  mother_fullname: '',
  agent_name: '',
  bank_name: '',
  bank_account: '',
  ibank_number: '',
  address: '',
  longitude: '',
  latitude: '',
  nationality: '',
  photouser: '',
  photomerchant: '',
  file_selfie: '',
  file_document_id: '',
  file_document_id_selfie: '',
  file_commercial_license: '',
  identity_type: '',
  identity_number: '',
  license_number: '',
  date_birth: '',
  gender: '',
  status: 'N',
  isneedapproval: '',
  isapproved: '',
  approveddate: '',
  approvedby: '',
  created_by: '',
  created_at: '',
  updated_by: '',
  updated_at: '',
  deleted_by: '',
  deleted_at: '',
  group: '',
  point_tier: '',
  language: '',
  municipio: '',
  posto_adms: '',
  suco: '',
  aldeia: '',
  profession: '',
  approval_description_premium: '',
  approval_description_agent: ''
};
