"use client"

import React from 'react'
import useSWR from 'swr'
import SingleTransaction from './SingleTransaction'

export default function RecentTransactionsList() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json())
  const { data, error } = useSWR(`https://api.foldbank.codingcoffee.me/api/v1/transactions/`, fetcher)

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

  const transactions = data.results

  const relateive_date = (date) => {
    const today = new Date();
    let fuzzy;

    if (today.getYear() == date.getYear()) {
      if (today.getMonth() == date.getMonth()) {
        if (today.getDate() == date.getDate()) {
          fuzzy = 'Today';
        } else if (today.getDate() == date.getDate() + 1) {
          fuzzy = 'Yesterday';
        }
      }
    }

    if (fuzzy == undefined){
      const monthNames = [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
      ];
      fuzzy = `${monthNames[date.getMonth()]} ${date.getDate()}`
    }

    let hours = date.getHours()
    let ampm = 'AM';
    if (hours >= 12) {
      ampm = 'PM';
      hours -= 12;
    }

    fuzzy = fuzzy + `, ${hours}:${date.getMinutes()} ${ampm}`
    return fuzzy
  }



  const recent_transactions = [];
  transactions.forEach((transaction) => {
    recent_transactions.push(
      <SingleTransaction
        title={transaction.to_account.holders_name}
        tag={transaction.tag.title}
        datetime={relateive_date(new Date(transaction.created_at))}
        amount={transaction.amount.toLocaleString('en-IN')}
        icon_type={transaction.tag.icon_type}
      />
    )
  })


  return (
    <div>
      {recent_transactions}
    </div>
  )
}