// Generated with util/create-component.js
import React, { memo } from "react";
import Collapse from "../../UI/Collapse";
import Heading from "../../UI/Heading";
import TextElement from "../Text";
import { ICollapseWithArticleListProps } from "./CollapseWithArticleList.types";

const CollapseWithArticleList = ({
  mainTitle,
  articleCount,
  articleList,
  defaultCollapsed,
}: ICollapseWithArticleListProps) => {
  return (
    <div className="w-full px-[2rem] pc:max-w-[80rem]">
      <Collapse
        data-testid="ContentsEditorCollapseWithArticleList"
        title={mainTitle}
        defaultCollapsed={defaultCollapsed}
        ableToClickCollapseButton={defaultCollapsed}
        showTitleCollapseButton={defaultCollapsed}
        showBottomCollapseButton={defaultCollapsed}
        headerClassName="my-[2.4rem]"
        titleClassName="bg-black text-white px-[1rem] py-[0.5rem] transition-all duration-200 ease-in-out text-heading-4 pc:text-heading-3 font-extrabold"
        titleClassNameOnCollapsed="px-[1rem] py-[0.5rem] transition-all duration-200 ease-in-out text-gray-9 text-heading-4 pc:text-heading-3 font-extrabold"
        bottomCollapseButtonClassName="mb-[4rem] pc:mb-[6rem]"
      >
        <div className="space-y-[2rem] divide-y-[1px] divide-dashed divide-gray-3 pb-[2rem]">
          {articleList.map(
            ({ articleTitle, paragraphList, paragraphCount }, articleIndex) => {
              // contents editor에서 articleCount의 default data를 미리 10개로 설정해둠에 따라 설정한 articleCount 만큼만 보이도록 조건 처리
              // TODO : 나중에 contents editor에서 article의 default data를 미리 생성하지 않도록 수정되면 그 때 아래 로직 삭제 필요
              if (articleIndex + 1 > articleCount) {
                return;
              }

              return (
                <div
                  key={`CollapseWithArticleList_article_${articleTitle}_${articleIndex}`}
                >
                  <div
                    className={`mb-[2rem] flex space-x-[1rem] ${articleIndex !==
                      0 && "mt-[2rem]"}`}
                  >
                    <div className="mt-[1rem] h-[0.5rem] w-[0.5rem] rounded-full bg-black" />

                    <Heading level={5} className="whitespace-pre-wrap">
                      {articleTitle}
                    </Heading>
                  </div>

                  <div className="space-y-[2rem]">
                    {paragraphList.map(
                      ({ paragraphTitle, content }, paragraphIndex) => {
                        // contents editor에서 paragraphCount default data를 미리 10개로 설정해둠에 따라 설정한 paragraphCount 만큼만 보이도록 조건 처리
                        // TODO : 나중에 contents editor에서 paragraph의 default data를 미리 생성하지 않도록 수정되면 그 때 아래 로직 삭제 필요
                        if (paragraphIndex + 1 > paragraphCount) {
                          return;
                        }

                        return (
                          <div
                            key={`CollapseWithArticleList_paragraph_${paragraphTitle}_${paragraphIndex}`}
                          >
                            <p className="mb-[0.4rem] whitespace-pre-wrap text-body-2 font-bold pc:text-heading-6 pc:font-extrabold">
                              {paragraphTitle}
                            </p>

                            <TextElement
                              editorContent={content}
                              className="p-0"
                            />
                          </div>
                        );
                      }
                    )}
                  </div>
                </div>
              );
            }
          )}
        </div>
      </Collapse>
    </div>
  );
};

export default memo(CollapseWithArticleList);