import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
import { useCallApi } from '@/hooks';
import moment from 'moment';
import DetailDialog from '../blocks/DetailDialog';

interface TransactionTopupProps {
  id: string;
  customers_id: string;
  group_id: string;
  username: string;
  fullname: string;
  email: string;
  status: string;
  created_at: Date;
}

interface ContextProps {
  
}

const initialProps: ContextProps = {

};

const TransactionTopupContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_customer;

type StatusCode = 'W' | 'Y' | 'N' | 'T';

interface StatusInfo {
  label: string;
  bg: string;
  text: string;
}

const statusMap: Record<StatusCode, StatusInfo> = {
  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
  Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
};

export const renderStatusBadge = (statusRaw: string | null | undefined) => {
	const status = statusRaw as StatusCode;
	const { label, bg, text } = statusMap[status] ?? {
		label: 'Unknown',
		bg: 'bg-gray-100',
		text: 'text-gray-600',
	};

	return (
		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
			{label}
		</span>
	);
};

// const { reload } = useDataGrid();

const TransactionTopupProvider = ({ children }: { children: React.ReactNode }) => {

  return (
    <TransactionTopupContext.Provider
      value={{}}
    >
      <Toaster expand visibleToasts={9} duration={3000} />
      <div>
        {children}
      </div>
    </TransactionTopupContext.Provider>
  );
};

export { TransactionTopupProvider, TransactionTopupContext };
export type { TransactionTopupProps };