import React, { useState } from "react";

import { DecksOuterWrapper, DecksInnerWrapper } from "./styled";

import Header from "../../components/Header/Header";
import { useFetchCardDecksQuery } from "../../features/cardDecks/cardDeck-api-slice";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { useAppSelector } from "../../app/hooks";

const Decks: React.FC = () => {
  const username = useAppSelector((state) => state.auth.user?.username);
  const { data = [], isFetching } = useFetchCardDecksQuery(username ?? "");
  return (
    <>
      <Header title="Stapel" />
      <DecksOuterWrapper>
        {isFetching ? (
          <div>Loading</div>
        ) : (
          <DecksInnerWrapper>
            {data.map((cardDeck) => (
              <Link key={cardDeck.id} to={`${cardDeck.id}`}>
                <div className="deck">
                  <div className="title">{cardDeck.title}</div>
                  <div className="desc">{cardDeck.description}</div>
                  <div className="count">Karten: {cardDeck.cards.length}</div>
                </div>
              </Link>
            ))}
            <Link to="new">
              <div className="centered">
                <FontAwesomeIcon icon={faPlus} size="3x" />
              </div>
            </Link>
          </DecksInnerWrapper>
        )}
      </DecksOuterWrapper>
    </>
  );
};

export default Decks;
