import PrimaryButton from "@/components/button/PrimaryButton";
import DangerMessage from "@/components/message/DangerMessage";
import { useGetAccounts } from "@/hooks/AccountHooks";
import { useState } from "react";
import AccountsList from "./AccountsList";
import AccountsListSkeleton from "./AccountsListSkeleton";
import AccountModal from "./modals/AccountModal";


export default function AccountsLoader(){
	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);

	const accountsQuery = useGetAccounts(0, 20);


	if(accountsQuery.isLoading){
		return <AccountsListSkeleton/>
	}
	else if(accountsQuery.isError){
		return <DangerMessage>Error: {accountsQuery.error.message}</DangerMessage>
	}
	else{
		return (
			<>
				{/* Add Account Button */}
				<PrimaryButton
					className="mb-8"
					onClick={() => setDisplayCreateAccountModal(true)}
				>
					Create Account
				</PrimaryButton>
				<AccountModal
					display={displayCreateAccountModal}
					close={() => setDisplayCreateAccountModal(false)}
					account={undefined}
				/>
				{/* Account Search Bar */}
				<AccountsList
					accounts={accountsQuery.data ?? []}
				/>
				{/* TODO: Add Pagination */}
			</>
		);
	}
}