import React, { createContext, useContext, useState } from 'react';

import { AccountsState } from '../types';

const AccountsContext = createContext<{
  accounts: AccountsState;
  setAccounts: (account: AccountsState) => void;
}>({
  accounts: { ethAccounts: [], cosmosAccounts: [] },
  setAccounts: () => {},
});

const useAccounts = () => {
  const accountsContext = useContext(AccountsContext);
  return accountsContext;
};

const AccountsProvider = ({ children }: { children: any }) => {
  const [accounts, setAccounts] = useState<AccountsState>({
    ethAccounts: [],
    cosmosAccounts: [],
  });
  return (
    <AccountsContext.Provider value={{ accounts, setAccounts }}>
      {children}
    </AccountsContext.Provider>
  );
};

export { useAccounts, AccountsProvider };