"use client";
import { error } from "@/config/swal";
import { getSeoScore } from "@/services/generate-article";
import { Accordion, AccordionItem, CircularProgress } from "@heroui/react";

import { useEffect, useRef, useState } from "react";

import EditArticleForm from "./article/edit-article-form";

export default function FormDetailArticle() {
  useEffect(() => {
    fetchSeoScore();
  }, []);

  const [totalScoreSEO, setTotalScoreSEO] = useState();
  const [errorSEO, setErrorSEO] = useState<any>([]);
  const [warningSEO, setWarningSEO] = useState<any>([]);
  const [optimizedSEO, setOptimizedSEO] = useState<any>([]);

  const fetchSeoScore = async () => {
    const res = await getSeoScore("1931");
    if (res.error) {
      error(res.message);
      return false;
    }
    setTotalScoreSEO(res.data.data?.seo_analysis?.score || 0);
    let errorList: any[] = [
      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.error,
      ...res.data.data?.seo_analysis?.analysis?.content_quality?.error,
    ];
    setErrorSEO(errorList);
    let warningList: any[] = [
      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.warning,
      ...res.data.data?.seo_analysis?.analysis?.content_quality?.warning,
    ];
    setWarningSEO(warningList);
    let optimizedList: any[] = [
      ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
      ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
    ];
    setOptimizedSEO(optimizedList);
  };

  return (
    <div className="mx-5 my-5 overflow-y-auto">
      <EditArticleForm isDetail={true} />
    </div>
  );
}