import { DataTable } from '@/components/ui/DataTable';
import { apiConfig } from '@/config/api.config';
import { columns, Members } from './Columns';
import { useState, useEffect } from 'react';
import axios from 'axios';
const BASE_URL = apiConfig.service_customer;

const dataMembers: Members[] = [
  {
    id: 37026,
    username: 67076807158,
    name: 'Jumentino Carlos Luis da Costa',
    group: 'REGULER',
    email: 'Jumentinocldacoata@gmail.com',
    createdDate: new Date('2025-02-21')
  },
  {
    id: 37027,
    username: 67071827345,
    name: 'Diego Costa',
    group: 'REGULER',
    email: 'DiegoCosta@gmail.com',
    createdDate: new Date('2025-02-21')
  },
  {
    id: 37028,
    username: 56123764212,
    name: 'Luis Da Vista',
    group: 'SUPERVISOR',
    email: 'LuisdaVista@gmail.com',
    createdDate: new Date('2024-01-21')
  }
];

const ManageMembers = () => {
  const [members, setMembers] = useState([]);

  useEffect(() => {
    fetchGroups()
  }, []);

  async function fetchGroups() {
    try {
      let groups = await axios.get(`${BASE_URL}/customer/list`, {
        params: {
          limit: 10,
          page: 1,
          with_deleted: false,
          order_field: 'fullname',
          order_direction: 'ASC'
        }
      });
      setMembers(groups.data.data.list)
    } catch (error: any) {
      alert(error.message)
      console.log(error);
    }
  }

  const handleUpdate = (member: any) => {
    console.log(members);
    
  }

  const handleDelete = (member: any) => {
    
  }

  return (
    <div>
      <div className="container mx-auto p-5">
        <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
        <DataTable data={dataMembers} columns={columns} onUpdate={handleUpdate} onDelete={handleDelete}/>
      </div>
    </div>
  );
};

export default ManageMembers;