"use client"

import styles from './centerCol.module.css'
import Dashboard from './Dashboard'
import BankAccount from './BankAccount'
import React from 'react'
import useSWR from 'swr'


export default function CenterCol() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json())
  const { data, error } = useSWR(`http://localhost:8000/api/v1/accounts/`, fetcher)

  if (error) return <div>Error: Failed to load</div>
  if (!data) return <div>Loading...</div>

  const bankDetails = data.results

  // const bankDetails = {
  //   banks: [{
  //     bankName: "SBI",
  //     bankFullName: "State Bank of India",
  //     bankLogoSrc: "/sbi.svg",
  //     bankAccountBalance: "27,932",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "34536896852",
  //     }, {
  //       title: "IFSC Code",
  //       value: "SBIN0006586",
  //     }, {
  //       title: "Swift BIC",
  //       value: "6895206BB",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "HDFC",
  //     bankFullName: "HDFC Bank",
  //     bankLogoSrc: "/hdfc.svg",
  //     bankAccountBalance: "2,58,630",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "92531805286",
  //     }, {
  //       title: "IFSC Code",
  //       value: "HDFC0002233",
  //     }, {
  //       title: "Swift BIC",
  //       value: "HDFCINBBBNG",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "Axis",
  //     bankFullName: "Axis Bank",
  //     bankLogoSrc: "/axis.svg",
  //     bankAccountBalance: "55,410",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "34536896852",
  //     }, {
  //       title: "IFSC Code",
  //       value: "SBIN0006586",
  //     }, {
  //       title: "Swift BIC",
  //       value: "6895206BB",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "ICICI",
  //     bankFullName: "ICICI Bank",
  //     bankLogoSrc: "/icici.svg",
  //     bankAccountBalance: "7,932",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "92531805286",
  //     }, {
  //       title: "IFSC Code",
  //       value: "HDFC0002233",
  //     }, {
  //       title: "Swift BIC",
  //       value: "HDFCINBBBNG",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }]
  // }

  const bankAccounts = []
  const infoTitles = [
    {
      "title": "Account Number",
      "key": "account_number",
    },
    {
      "title": "IFSC Code",
      "key": "ifsc_code",
    },
    {
      "title": "Swift BIC",
      "key": "swift_bic",
    },
    {
      "title": "Holder's Name",
      "key": "holders_name",
    },
  ]

  bankDetails.forEach((bank) => {
    const infoLines = []
    infoTitles.forEach((option) => {
      infoLines.push({
        "title": option.title,
        "value": bank[option.key],
      })
    })

    bankAccounts.push(
      <BankAccount
        key={bank.bank.name}
        bankLogoSrc={`http://localhost:8000/media/${bank.bank.logo}`}
        bankName={bank.bank.name}
        bankFullName={bank.bank.name}
        bankAccountBalance={bank.balance}
        infoLines={infoLines}
      />
    )
  })

  return (
    <div className={styles.main}>
      <div className={styles.title}>
        <div className={styles.greeting}>Good morning, Nishant</div>
        <div className={styles.date}>It's 3rd of January, a Monday</div>
      </div>
      <Dashboard />
      <div className={styles.accounts}>
        {bankAccounts}
      </div>
    </div>
  )
}