// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import PickLabel from "../PickLabel";
import NsImage from "../shared/ns-image";
import Button from "../UI/Button";
import {
  BookmarkDefault,
  BookmarkPressed,
  ComparisonDefault,
  ComparisonPressed,
  Share,
} from "../UI/Icon";
import Text from "../UI/Text";
import { ProductSidebarProps } from "./ProductSidebar.types";

const ProductSidebar: React.FC<ProductSidebarProps> = ({ data }) => {
  const {
    goodsName,
    modelName,
    brandName,
    image,
    ImageWrapper,
    pickType,
    likeCount,
    likeStatus,
    compareStatus,
    onClickPayButton,
    onClickShareButton,
    onClickBookmarkButton,
    onClickCompareButton,
    onClickSpecButton,
  } = data;

  return (
    <div
      data-testid="ProductSidebar"
      className="nrc--ProductSidebar w-[12.4rem] border-[1px] border-gray-3 rounded-[10px] p-[1.2rem] bg-white z-[200]"
    >
      <div className="space-y-[0.6rem]">
        <div className="relative w-[10rem] h-[10rem] border-[1px] border-gray-3">
          <NsImage
            ImageWrapper={ImageWrapper}
            imageUrl={image}
            className="w-[10rem] h-[10rem] object-contain"
            storeImage
          />
          <PickLabel
            type="label"
            pickType={pickType}
            labelStyle="text-detail-1 w-full text-center py-[0.2rem] absolute bottom-0 left-0"
          />
        </div>
        <div className="text-center">
          <Text type="B10" className="break-all text-gray-10 line-clamp-1">
            {brandName}
          </Text>
          <Text type="B5" className="break-all text-gray-10 line-clamp-1">
            {goodsName}
          </Text>
          <Text type="B5" className="break-all text-gray-10 line-clamp-1">
            {modelName}
          </Text>
        </div>
        <Button
          size="s"
          type="cta"
          onClick={() => {
            onClickPayButton && onClickPayButton();
          }}
        >
          <Text type="B8" className="text-white">
            구매하기
          </Text>
        </Button>
      </div>

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

      <div>
        <ActionButtons
          onClickBookmarkButton={onClickBookmarkButton}
          onClickCompareButton={onClickCompareButton}
          onClickShareButton={onClickShareButton}
          likeCount={likeCount}
          likeStatus={likeStatus}
          compareStatus={compareStatus}
        />
        <Button
          size="s"
          type="outline"
          color="gray"
          onClick={() => {
            onClickSpecButton && onClickSpecButton();
          }}
        >
          <Text type="B8" className="text-gray-10 whitespace-nowrap">
            스펙전체보기
          </Text>
        </Button>
      </div>
    </div>
  );
};

export default ProductSidebar;

const ActionButtons = ({
  onClickBookmarkButton,
  onClickCompareButton,
  onClickShareButton,
  likeCount = 0,
  likeStatus = false,
  compareStatus = false,
}: {
  onClickBookmarkButton: () => void;
  onClickCompareButton: () => void;
  onClickShareButton: () => void;
  likeCount?: number;
  likeStatus?: boolean;
  compareStatus?: boolean;
}) => {
  const [likeCountState, setLikeCount] = useState<number>(likeCount);
  const [isLiked, setIsLiked] = useState<boolean>(likeStatus);
  const [isCompared, setIsCompared] = useState<boolean>(compareStatus);

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

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

  return (
    <div className="w-full flex flex-col justify-center items-center space-y-[2rem] mb-[2rem]">
      {onClickBookmarkButton && (
        <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>
      )}

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

      {onClickCompareButton && (
        <Button
          type="icon"
          color={isCompared ? "blue" : "gray"}
          icon={
            isCompared ? (
              <ComparisonPressed size="3rem" />
            ) : (
              <ComparisonDefault size="3rem" />
            )
          }
          onClick={() => {
            onClickCompareButton();
            onCompareStatus(!isCompared);
          }}
        >
          비교함
        </Button>
      )}
    </div>
  );
};