'use client'

import { Card } from '@/Deck';
import { useDeck } from '@/hooks/useDeck'
import { camelToSpace } from '@/utils/camelToSpace';
import Image from 'next/image'
import { useCallback, useEffect, useState } from 'react';

type planeCard = {
  maneuvers: [
    {
      name: string,
      complexity: 'simple' | 'complex',
      length: number
    }
  ],
  attacks: ('airToGround' | 'groundToAir' | 'airToAir')[],
  penalties: ('Stall' | 'Damage' | 'Ground Battle')[],
  type: 'action' | 'win condition' | 'wild card' | 'sudden death'
};

export default function Home() {
  const { addCard, createHand, deck, discard, drawToHand, hands, reshuffle, shuffle, createDeck } = useDeck<planeCard>();
  const series = 1;
  
  const fetchDeckJson = useCallback(async () => {
    const res = await fetch('./json/deck.json');
    const json: Card<planeCard>[] = await res.json();

    json.forEach(c => c.id = crypto.randomUUID());

    createDeck(json);
  }, [])

  useEffect(() => {
    fetchDeckJson().then(() => {
      shuffle()
      // setRender(!render)
    })
  }, [])

  return (
    <div className="grid grid-cols-4 gap-6">
      {deck.map((c,i) => (<div className="rounded-lg aspect-card p-8 shadow-lg flex flex-wrap dark:bg-green-700">
        <div className="basis-full">
          <p className="mb-4 font-extrabold uppercase text-xl">{c.type}</p>

          {c.attacks.length || c.maneuvers.length ?
            <p className="mb-8 text-sm">Select either one maneuver or one attack to make. If you can't complete one action from this card, you must take one penalty listed. If there are no penalties listed, discard this card.</p> :
            <p className="mb-8 text-sm">Bad luck! You must take one of the following penalties</p>
          }

          {c.maneuvers.length > 0 ? <p className="capitalize my-8"><span className="font-bold">Maneuvers</span>: {c.maneuvers.map(a => camelToSpace(a.name)).join(', ')}</p> : ''}
          {c.attacks.length > 0 ? <p className="capitalize my-8"><span className="font-bold">Attacks</span>: {c.attacks.map(a => camelToSpace(a)).join(', ')}</p> : ''}
          {c.penalties.length > 0 ? <><hr /><p className="capitalize my-8"><span className="font-bold">Penalties</span>: {c.penalties.join(', ')}</p></> : ''}
        </div>

        <div className="text-xs self-end flex justify-between w-full text-white/50">
          <p className="dark:text-white/50 text-black/50">Series {series}</p>
          <p className="dark:text-white/50 text-black/50">{i + 1}/{deck.length}</p>
          <p className="dark:text-white/50 text-black/50">&copy; {new Date().getFullYear()} Cyborg Grizzly Games</p>
        </div>
      </div>))}
    </div>
  )
}