import ActiveAccount from '@lume/shared/accounts/active';
import InactiveAccount from '@lume/shared/accounts/inactive';
import LumeIcon from '@lume/shared/icons/lume';
import { APP_VERSION } from '@lume/stores/constants';
import { getAccounts } from '@lume/utils/storage';

import { Plus } from 'iconoir-react';
import useSWR from 'swr';

const fetcher = () => getAccounts();

export default function MultiAccounts() {
  const { data, error }: any = useSWR('allAccounts', fetcher);

  return (
    <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
      <div className="flex flex-col gap-3">
        <a
          href="/app/newsfeed/following"
          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
        >
          <LumeIcon className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
        </a>
        <>
          {error && <div>failed to load</div>}
          {!data ? (
            <div className="group relative flex h-11 w-11 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
          ) : (
            data.map((account: { is_active: number; pubkey: string }) => {
              if (account.is_active === 1) {
                return <ActiveAccount key={account.pubkey} user={account} />;
              } else {
                return <InactiveAccount key={account.pubkey} user={account} />;
              }
            })
          )}
        </>
        <a
          href="/onboarding"
          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
        >
          <Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
        </a>
      </div>
      <div className="flex flex-col gap-0.5 text-center">
        <span className="text-sm font-black uppercase leading-tight text-zinc-600">Lume</span>
        <span className="text-xs font-medium text-zinc-700">v{APP_VERSION}</span>
      </div>
    </div>
  );
}