export interface VaultData {
  addresses: Partial<Record<Coin, string>>;
  money: number;
  pin: string;
  loaded: boolean;
  transactions: Transaction[];
}

interface PhoneInputProps {
  emit: () => void;
  setCode: (code: string) => void;
}

export const COINS = [
  'btc',
  'eth',
  'sol',
  'doge',
  'ltc',
  'xrp',
  'sui',
  'bnb',
  'ton',
  'dot',
  'atom',
  'bch',
  'xlm',
  'rvn',
  'dgb',
  'bld',
  'rune',
  'akt',
  'sei',
  'juno',
  'strd',
] as const;
export type Coin = (typeof COINS)[number];

export interface Transaction {
  coin: Coin;
  value: number;
}

export type PriceMap = Record<Coin, number>;

export const fetchCoinPrices = async (): Promise<PriceMap> => {
  const idsMap: Record<Coin, string> = {
    btc: 'bitcoin',
    eth: 'ethereum',
    sol: 'solana',
    doge: 'dogecoin',
    ltc: 'litecoin',
    xrp: 'ripple',
    sui: 'sui',
    bnb: 'binancecoin',
    ton: 'toncoin',
    dot: 'polkadot',
    atom: 'cosmos',
    bch: 'bitcoin-cash',
    xlm: 'stellar',
    rvn: 'ravencoin',
    dgb: 'digibyte',
    bld: 'agoric',
    rune: 'thorchain',
    akt: 'akash-network',
    sei: 'sei-network',
    juno: 'juno-network',
    strd: 'stride',
  };
  const ids = Object.values(idsMap).join(',');

  // const res = await fetch(
  //   `https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`
  // );
  const res = await fetch('/api/crypto/prices');

  const data = await res.json();

  const prices: PriceMap = {} as PriceMap;
  COINS.forEach((symbol) => {
    const id = idsMap[symbol];
    prices[symbol] = data[id]?.usd ?? 0;
  });

  return prices;
};

// export function Vault({ emit, setCode }: PhoneInputProps) {
//   const [open, setOpen] = useState(false);

//   const [vault, setVault] = useState<VaultData>({
//     money: 0,
//     loaded: true,
//     transactions: [],
//   });
//   const [enabledCoins, setEnabledCoins] = useState<Record<Coin, boolean>>(
//     COINS.reduce(
//       (acc, coin) => {
//         if (coin === 'sui' || coin === 'xrp') {
//           acc[coin] = false;
//         } else {
//           acc[coin] = true;
//         }
//         return acc;
//       },
//       {} as Record<Coin, boolean>
//     )
//   );

//   const handleChange =
//     (field: Coin) => (e: React.ChangeEvent<HTMLInputElement>) => {
//       setVault((prev) => ({
//         ...prev,
//         [field]: e.target.value,
//       }));
//     };

//   const handleToggleCoin = (coin: Coin) => {
//     setEnabledCoins((prev) => ({
//       ...prev,
//       [coin]: !prev[coin],
//     }));
//   };

//   const handleSubmit = (e: React.FormEvent) => {
//     e.preventDefault();
//     const filtered: VaultData = {
//       money: 0,
//       loaded: true,
//       transactions: [],
//     };

//     for (const coin of COINS) {
//       if (enabledCoins[coin] && vault[coin]) {
//         filtered[coin] = vault[coin];
//       }
//     }

//     setCode(JSON.stringify(filtered));
//     emit();
//     setOpen(false);
//   };

//   return (
//     <Dialog open={open} onOpenChange={setOpen}>
//       <DialogTrigger asChild>
//         <Button variant="outline">Vault</Button>
//       </DialogTrigger>
//       <DialogContent className="sm:max-w-[425px]">
//         <DialogHeader>
//           <DialogTitle>Vault address</DialogTitle>
//           <DialogDescription>
//             Write down all the addresses. Disable the ones you don't use.
//           </DialogDescription>
//         </DialogHeader>
//         <form onSubmit={handleSubmit} className="grid gap-4 py-4">
//           {COINS.map((coin) => (
//             <div key={coin} className="flex items-center gap-3">
//               <Checkbox
//                 id={`checkbox-${coin}`}
//                 checked={enabledCoins[coin]}
//                 onCheckedChange={() => handleToggleCoin(coin)}
//               />

//               <GetLogo key={coin} keyProp={coin} />

//               <Input
//                 disabled={!enabledCoins[coin]}
//                 onClick={() => {
//                   if (!enabledCoins[coin]) {
//                     handleToggleCoin(coin);
//                   }
//                 }}
//                 placeholder={`${coin.toUpperCase()} Addy`}
//                 className="flex-1 border-border h-[45px] px-3"
//                 value={vault[coin] ?? ''}
//                 onChange={handleChange(coin)}
//               />
//             </div>
//           ))}
//           <Button type="submit">Submit</Button>
//         </form>
//       </DialogContent>
//     </Dialog>
//   );
// }