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

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

const AccountsContext = createContext<{
  accounts: AccountsState;
  setAccounts: (account: AccountsState) => void;
  currentIndex: number;
  setCurrentIndex: (index: number) => void;
  networkType: string;
  setNetworkType: (networkType: string) => void;
}>({
  accounts: { ethAccounts: [], cosmosAccounts: [] },
  setAccounts: () => {},
  currentIndex: 0,
  setCurrentIndex: () => {},
  networkType: '',
  setNetworkType: () => {},
});

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

const AccountsProvider = ({ children }: { children: any }) => {
  const [accounts, setAccounts] = useState<AccountsState>({
    ethAccounts: [],
    cosmosAccounts: [],
  });
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [networkType, setNetworkType] = useState<string>('eth');

  return (
    <AccountsContext.Provider
      value={{
        accounts,
        setAccounts,
        currentIndex,
        setCurrentIndex,
        networkType,
        setNetworkType,
      }}>
      {children}
    </AccountsContext.Provider>
  );
};

export { useAccounts, AccountsProvider };