brawlset/app/app/account/profile/decks/page.tsx

'use client'

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

import { useEffect, useState } from "react"
import { useRouter } from 'next/navigation'
import { getCookie } from "@/lib/utils"
import { Textarea } from "@/components/ui/textarea"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

import type { deck, bset } from "@prisma/client";

interface bsetJson extends bset {
  set_codes: string[],
  icons: string[]
}

interface cardEntryAPIProps {
  amount: number,
  sanitized_name: string,
  set: string
}

interface deckAPIProps {
  name: string,
  selected_bset: string,
  commander_name: string,
  cards: cardEntryAPIProps[]
}

export default function Signin() {
  const [deckName, setDeckName] = useState("")
  const [deckCommanderName, setDeckCommanderName] = useState("")
  const [deckImporter, setDeckImporter] = useState("")
  const [selectedBset, setSelectedBset] = useState("")
  const [decks, setDecks] = useState<deck[]>([])
  const [bsets, setBsets] = useState<bsetJson[]>([])
  const [openSelectBset, setOpenSelectBset] = useState(false)
  const router = useRouter()
  const token = getCookie('JWT')

  useEffect(() => {
    if(getCookie('JWT') == "") {
      router.refresh()
      router.push('/')
    }

    fetch('http://localhost:3000/api/account/decks/', {
      method: "GET",
      headers: {Authorization: 'Bearer ' + token},
    }).then((res) => {
      if(res.status == 200) {
        res.json().then((apiData) => {
          setDecks(apiData.data)
        })
      }
    })

    fetch('http://localhost:8072/misc/bsets.json').then((res) => {
      if(res.status == 200) {
        res.json().then((data) => {
          setBsets(data)
        })
      }
    })

  },[])

  function getDataFromLine(line: string){
    if(line != "") {
      const values = line.split(" ")
      if (values.length >= 4) {
        const amount: number = parseInt(values.at(0)!.toString())

        let set_index = 0
        for(let i = 1; i < values.length; i++){
          if(values.at(-i)!.toString().match(/\([A-Z]{3}\)/gm)){
            set_index = -i
          }
        }

        const set = values.at(set_index)!.toString().replace(/[()]/gm,"").toLowerCase()
        const card_name = values.slice(1,set_index).join(" ").replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase()
        const card_data : cardEntryAPIProps = {amount, sanitized_name: card_name, set}
        return card_data
      } else {
        return null
      }
    } else {
      return null
    }

  }

  function deleteDeck(id:string){
    fetch('http://localhost:3000/api/account/decks/delete', {
      method: "DELETE",
      headers: {Authorization: 'Bearer ' + token},
      body: JSON.stringify({ id })
    }).then((res) => {
      if(res.status == 200) {
        setDecks(old => old.filter((deck: deck) => deck.id != id))
      }
    })
  }

  function updateDeckInput(txt:string){
    setDeckImporter(txt)
    const lines = txt.split("\n")
    setDeckCommanderName(lines[0])
  }

  function importDeck(){
    const deckText = deckImporter
    const lines = deckText.split("\n")
    const dataToSend : deckAPIProps = { name: deckName, selected_bset: selectedBset.replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase() ,commander_name: getDataFromLine(deckCommanderName)!.sanitized_name, cards: [] }
    lines.slice(1).forEach((line: string) => {
      const data = getDataFromLine(line)
      if(data != null) {
        dataToSend.cards.push(data)
      }
    });
    console.log(dataToSend)


    fetch('http://localhost:3000/api/account/decks/create', {
      method: "POST",
      headers: {Authorization: 'Bearer ' + token},
      body: JSON.stringify(dataToSend)
    }).then((res) => {
      if(res.status == 200) {
        res.json().then((apiData) => {
          const new_deck: deck = apiData.data
          setDecks(oldDecks => [...oldDecks, new_deck])
          setDeckName("")
          setDeckImporter("")
          setSelectedBset("")
          setDeckCommanderName("")
        })
      }
    })
  }

  return (
    <div className="flex flex-col items-center mt-24" >
      <Card className="max-w-xl w-full">
        <CardHeader>
          <CardTitle>Importer un deck</CardTitle>
          <CardDescription>Depuis moxfield</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <Label className="font-bold">Nom du deck</Label>
              <Input value={deckName} onChange={(e) => setDeckName(e.target.value)} placeholder="Nom du deck" />
            </div>
            <div className="flex flex-col gap-2">
              <Label className="font-bold">BSet selectionné</Label>
              <Popover open={openSelectBset} onOpenChange={setOpenSelectBset}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={openSelectBset}
                    className="w-full justify-between"
                  >
                    {selectedBset
                      ? bsets.find((bset: bset) => bset.sanitized_name === selectedBset)?.name
                      : "Selectionnez un Bset..."}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0">
                  <Command className="w-full">
                    <CommandInput placeholder="Search framework..." />
                    <CommandList>
                      <CommandEmpty>Pas de BSet trouvé.</CommandEmpty>
                      <CommandGroup>
                        {bsets.map((bset) => (
                          <CommandItem
                            key={bset.sanitized_name}
                            value={bset.sanitized_name}
                            onSelect={(currentValue) => {
                              setSelectedBset(currentValue === selectedBset ? "" : currentValue)
                              setOpenSelectBset(false)
                            }}
                          >
                            <div className="flex flex-row gap-2">
                              {bset.icons.map((icon) => (
                                <img key={icon} src={icon} className="h-3" loading="lazy" />
                              ))}
                            </div>
                            {bset.name}
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>
            <div className="flex flex-col gap-2">
              <Label className="font-bold">Commandant</Label>
              <Label className="text-xs">Correspond à la première ligne de l&apos;import Moxfield</Label>
              <Input value={deckCommanderName} placeholder="Commandant du Deck" disabled />
            </div>
            <div className="flex flex-col gap-2">
              <Label className="font-bold">Liste des cartes</Label>
              <Textarea value={deckImporter} onChange={(e) => updateDeckInput(e.target.value)} placeholder="Collez votre deck ici." className="h-60" />
            </div>
            <div className="flex flex-row w-full">
              <Button onClick={importDeck}>Importer</Button> 
            </div>
          </div>
        </CardContent>
      </Card>
      <div className="max-w-3xl w-full mt-12">
        <Table className="w-full"> 
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            { decks.map((deck) => (
              <TableRow key={deck.id}>
                <TableCell>{deck.name}</TableCell>
                <TableCell className="flex flex-row gap-4 items-center"><a href={"/deck/" + deck.id}>Voir la page</a><Button disabled>Editer</Button><Button onClick={() => {deleteDeck(deck.id)}} variant="destructive">Supprimer</Button></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}