import Menu from "../Menu";
import styles from "../../styles/comment/CommentSection.module.css";
import toast from "react-hot-toast";
// @ts-ignore
import { Dispatch, SetStateAction, useState } from "react";
import { useMediaQuery } from "../../hooks/useMediaQuery";
import Comment from ".";
import { AiOutlineLoading3Quarters } from "react-icons/ai";
import { CommentsType } from "helper/types";
import dayjs from "dayjs";
import axios from "axios";

const CommentSection = ({
  comments = [],
  loading = false,
  brawlhalla_id,
  setComments,
}: {
  comments?: CommentsType;
  setComments: Dispatch<SetStateAction<CommentsType | undefined>>;
  loading: boolean;
  brawlhalla_id: number;
}) => {
  const [input, setInput] = useState("");
  const isSmall = useMediaQuery({ maxWidth: "1380px" });
  return (
    <Menu
      width={isSmall ? "100%" : "95%"}
      barTitle="Profile Comments"
      height="auto"
      minHeight="11rem"
      contentMinHeight={"11rem"}
      maxHeight={"25.5rem"}
      contentMaxHeight="8.5rem"
      overflow="scroll"
      marginTop={!isSmall ? 12 : "2rem"}
      alignBarAtStart={true}
      input={true}
      onInputChange={(e: any) => setInput(e.target.value)}
      onSubmission={async () => {
        toast.loading("Submitting comment...")
        const data = await axios.post(`/api/player/${brawlhalla_id}/comments`, {
          get: false,
          comment: input,
        });
        console.log(await data.data)
        if(await data.data?.success === false) {
          toast.error(data.data?.message || "An error occurred")
          return
        } else {
          toast.success("Submitted comment!")
        }
        if (await data.data?.comments) {
          setComments(await data?.data?.comments);
        }
      }}
    >
      <h1 className="text-gold-300 font-semibold font-Coda mt-12">Coming soon!!!</h1>
      {/* <>
        {comments?.map((comment: CommentsType[0]) => {
          return (
            <div
              className={styles.comment_wrapper}
              key={`comment_${comment.id}`}
            >
              <Comment {...comment} />
              <div className={styles.divider_parent}>
                <div className={styles.divider_wrapper}>
                  <div className={styles.divider} />
                  <span className={styles.date}>
                    {dayjs(comment.commentedAt).format(`HH:mm | DD.MM.YYYY`)}
                  </span>
                  <div className={styles.divider} />
                </div>
              </div>
            </div>
          );
        })}
      </>
      {comments.length === 0 && !loading ? (
        <div className="flex justify-center items-center">
          <h1 className="text-center text-3xl text-gold-300 font-Coda font-bold mt-2">
            No comments!
          </h1>
        </div>
      ) : (
        <></>
      )}

      {loading ? (
        <div className="flex flex-col justify-center items-center">
          <AiOutlineLoading3Quarters className="spin" size={"3rem"} />
          <h1 className="text-center text-1xl text-gold-300 font-Coda font-bold mt-2">
            Loading...
          </h1>
        </div>
      ) : (
        <></>
      )} */}
    </Menu>
  );
};

export default CommentSection;