import { apiConfig } from '@/config/api.config';
import { Account, columns } from './account/Columns';
import { DataTable } from '@/components/ui/DataTable';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { getData } from '@/utils';
import { useCallApi } from '@/hooks';

const API_URL = apiConfig.service_dashboard;

const dataAccount: Account[] = [
  {
    id: 1,
    name: 'eMoney Account',
    description: 'Rekening Member eMoney',
    systemAccount: false,
    createdDate: new Date('2019-12-05'),
    creditLimit: null,
    currency: null
  },
  {
    id: 2,
    name: 'Merchant Account',
    description: 'Rekening Merchant',
    systemAccount: false,
    createdDate: new Date(),
    creditLimit: null,
    currency: null
  }
];

const ManageAccount = () => {
  const [accounts, setAccounts] = useState<Account[]>([]);
  const { GetData } = useCallApi();
  // console.log(accounts);

  useEffect(() => {
    const fetchAccount = async () => {
      try {
        const response = await fetch(`${API_URL}/user/list`);
        const data: Account[] = await response.json();
        setAccounts(data);
      } catch (error) {
        console.error('Error fetching data', error);
      }
    };

    fetchAccount();
  }, []);

  // const fetchAccount = async (page: number, limit: number, sorting: any, filter: any) => {
  //   try {
  //     const response = await GetData(`${API_URL}/user/list`, {
  //       limit: limit,
  //       page: page + 1,
  //       with_deleted: true,
  //       order_field: sorting[0].id,
  //       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
  //       filter: JSON.stringify(filter)
  //     });

  //     setAccounts(response?.data.list);

  //     return {
  //       data: response?.data.list,
  //       totalCount: response?.data.total_count
  //     };
  //   } catch (error) {
  //     console.log(error);
  //   }
  // };

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

export default ManageAccount;