"use client"

import React from 'react'
import styles from './recentTnx.module.css'
import { BsTriangleFill } from 'react-icons/bs';
import SingleTransaction from './SingleTransaction'
import useSWR from 'swr'


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

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

  const transactions = data.results

  // const transactions = [
  //   {
  //     title: "Fenny's Banglore",
  //     datetime: "Today, 11:17 am",
  //     amount: "3,940",
  //     tag: "Tag",
  //   }, {
  //     title: "Sendoor",
  //     datetime: "Today, 11:45 pm",
  //     amount: "35",
  //     tag: "Food & Drinks",
  //     icon_type: "drink",
  //   }, {
  //     title: "Reliance Fresh",
  //     datetime: "Yesterday, 5:37 pm",
  //     amount: "2,399",
  //     tag: "Groceries",
  //     icon_type: "groceries",
  //   }, {
  //     title: "Chai Point",
  //     datetime: "Yesterday, 12:17 pm",
  //     amount: "312",
  //     tag: "Food & Drinks",
  //     icon_type: "food",
  //   }, {
  //     title: "Uber",
  //     datetime: "Jan 2, 10:32 am",
  //     amount: "75",
  //     tag: "Transport",
  //     icon_type: "transport",
  //   }, {
  //     title: "Swiggy",
  //     datetime: "Jan 1, 11:17 pm",
  //     amount: "249",
  //     tag: "Food & Drinks",
  //     icon_type: "swiggy",
  //   }, {
  //     title: "Netflix",
  //     datetime: "Dec 31, 11:59 pm",
  //     amount: "199",
  //     tag: "Subsciption",
  //     icon_type: "netflix",
  //   }
  // ]

  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}
        icon_type={transaction.tag.icon_type}
      />
    )
  })


  return (
    <div className={styles.main}>
      <div className={styles.heading}>
        <div className={styles.hRecTnx}>Recent Transactions</div>
        <div className={styles.hSeeAll}>See All</div>
      </div>

      <div className={styles.options}>
        <div className={styles.optionButton}>
          <div>All transactions</div>
          <div>
            <BsTriangleFill
              size={10}
              className={styles.arrow}
              color="#676483"
            />
          </div>
        </div>
        <div className={styles.optionButton}>
          <div>All banks</div>
          <div>
            <BsTriangleFill
              size={10}
              className={styles.arrow}
              color="#676483"
            />
          </div>
        </div>
      </div>

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