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

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 axios.get(`${API_URL}/user/list`);
  //       console.log(response);
  //       const data: Account[] = response.data;
  //       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)
      });

      console.log(response?.data.list);
      setAccounts(response?.data.list);

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

  return (
    <div>
      <div className="container mx-auto w-full">
        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Account</h1>
        <Breadcrumbs>
          <Link underline="none" color="inherit" href="/">
            <span className="text-sm hover:underline">Dashboard</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Accounts</span>
          </Link>

          <Link underline="none" color="inherit">
            <span className="text-sm">Manage Account</span>
          </Link>
        </Breadcrumbs>
        <DataTable
          columns={columns}
          data={dataAccount}
          createData={null}
          onUpdate={() => console.log('Callback update')}
          onDelete={() => console.log('Callback delete')}
        />
      </div>
    </div>
  );
};

export default ManageAccount;