// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import Button from "../UI/Button";
import {
  BookmarkDefault,
  BookmarkPressed,
  Comment,
  Index,
  Share,
} from "../UI/Icon";
import Text from "../UI/Text";
import { ContentSidebarProps } from "./ContentSidebar.types";
import ContentSidebarIndex from "./ContentSidebarIndex";

const ContentSidebar: React.FC<ContentSidebarProps> = ({ type, data }) => {
  const {
    category,
    likeCount,
    likeStatus,
    onClickShareButton,
    onClickBookmarkButton,
    onClickCommentButton,
    commentCount,
    onClickRecommendProductsButton,
    indexData,
  } = data;

  const [indexOpened, setIndexOpend] = useState<boolean>(false);

  return (
    <div
      data-testid="ContentSidebar"
      className="nrc--ContentSidebar w-[12.4rem] border-[1px] border-gray-3 rounded-[10px] p-[1.2rem] bg-white z-[200] relative"
    >
      {type === "purchaseGuide" && indexData && indexOpened && (
        <ContentSidebarIndex
          indexData={indexData}
          setIndexOpend={setIndexOpend}
        />
      )}

      <Text type="B5" className="text-center text-gray-10 mb-[2rem]">
        {category} <br />
        {type === "purchaseGuide" ? "구매가이드" : "가전백과"}
      </Text>

      <div className="w-full h-[1px] bg-gray-3"></div>

      <div className="mt-[2rem]">
        <ActionButtons
          likeCount={likeCount}
          likeStatus={likeStatus}
          onClickBookmarkButton={onClickBookmarkButton}
          onClickCommentButton={onClickCommentButton}
          commentCount={commentCount}
          onClickShareButton={onClickShareButton}
          showIndexButton={type === "purchaseGuide"}
          indexOpened={indexOpened}
          setIndexOpend={setIndexOpend}
        />
        <Button
          size="s"
          type="outline"
          onClick={() => {
            onClickRecommendProductsButton && onClickRecommendProductsButton();
          }}
        >
          <Text type="B8" className="text-blue-7 whitespace-nowrap">
            추천제품 보기
          </Text>
        </Button>
      </div>
    </div>
  );
};
export default ContentSidebar;

const ActionButtons = (props: {
  likeCount?: number;
  likeStatus?: boolean;
  onClickBookmarkButton: () => void;
  commentCount?: number;
  onClickCommentButton: () => void;
  onClickShareButton: () => void;
  showIndexButton: boolean;
  indexOpened: boolean;
  setIndexOpend: (indexStatus: boolean) => void;
}) => {
  const {
    likeCount = 0,
    likeStatus = false,
    onClickBookmarkButton,
    commentCount = 0,
    onClickCommentButton,
    onClickShareButton,
    showIndexButton,
    setIndexOpend,
    indexOpened,
  } = props;

  const [likeCountState, setLikeCount] = useState<number>(likeCount);
  const [isLiked, setIsLiked] = useState<boolean>(likeStatus);

  const onLikeCountStatus = (likeCount: number) => {
    setLikeCount(likeCount);
  };
  const onLikeStatus = (likeStatus: boolean) => {
    setIsLiked(likeStatus);
  };

  useEffect(() => {
    setLikeCount(likeCount);
    onLikeStatus(likeStatus);
  }, [likeStatus]);

  return (
    <div className="w-full flex flex-col justify-center items-center space-y-[2rem] mb-[2rem]">
      {showIndexButton && (
        <Button
          type="icon"
          color="gray"
          icon={<Index size="3rem" />}
          onClick={() => {
            setIndexOpend(!indexOpened);
          }}
        >
          목차
        </Button>
      )}

      <Button
        type="icon"
        color={isLiked ? "blue" : "gray"}
        icon={
          isLiked ? (
            <BookmarkPressed size="3rem" />
          ) : (
            <BookmarkDefault size="3rem" />
          )
        }
        onClick={() => {
          onClickBookmarkButton();
          onLikeStatus(!isLiked);
          if (isLiked) {
            onLikeCountStatus(likeCount);
          } else {
            onLikeCountStatus(likeCount + 1);
          }
        }}
      >
        {likeCountState}
      </Button>

      <Button
        type="icon"
        color="gray"
        icon={<Share size="3rem" />}
        onClick={() => {
          onClickShareButton();
        }}
      >
        공유
      </Button>

      <Button
        type="icon"
        color="gray"
        icon={<Comment size="3rem" />}
        onClick={() => {
          onClickCommentButton();
        }}
      >
        {commentCount}
      </Button>
    </div>
  );
};