// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import { useMobileDetect } from "../../hooks/useMobileDetect";
import ColorChips from "../ColorChips";
import PickLabel from "../PickLabel";
import NsImage from "../shared/ns-image";
import StarRating from "../StarRating";
import Button from "../UI/Button";
import Heading from "../UI/Heading";
import {
  BookmarkDefault,
  BookmarkPressed,
  Caret,
  ComparisonDefault,
  ComparisonPressed,
  Share,
} from "../UI/Icon";
import Slider from "../UI/Slider";
import Text from "../UI/Text";
import { ProductDetailTitleProps } from "./ProductDetailTitle.types";

const ProductDetailTitle: React.FC<ProductDetailTitleProps> = ({ data }) => {
  const { isMobile } = useMobileDetect();
  const {
    goodsName,
    modelName,
    brandName,
    productCategory,
    price,
    images,
    pickType,
    reviewAvg,
    reviewCnt,
    colors,
    likeCount,
    likeStatus,
    compareStatus,
    onClickBookmarkButton,
    onClickCompareButton,
    onClickShareButton,
    onClickPayButton,
    onClickReviewButton,
  } = data;

  const getPriceString = (price: string) => {
    const endText = price.slice(-2, price.length);
    if (endText === "만원") return price;
    return price + "만원";
  };

  return (
    <div
      data-testid="ProductDetailTitle"
      className="nrc--ProductDetailTitle pc:flex"
    >
      <div className="relative w-full pc:w-[47rem] flex justify-center pb-[2rem] mobile:border-b-[1px] border-gray-3">
        {colors && (
          <div className="absolute top-0 left-0 pc:hidden">
            <ColorChips
              colors={colors}
              chipWidth="2"
              chipHeight="2"
              direction="column"
              shape="square"
              size={10}
            />
          </div>
        )}

        <Slider
          sliderWidth={isMobile ? 25 : 40}
          sliderHeight={isMobile ? 25 : 40}
          unit="rem"
          showThumbnails={!isMobile}
          thumbnailGap={0.5}
          thumbnailWidth={6}
        >
          {images.map((image) => {
            return (
              <div
                key={image}
                className="w-[25rem] h-[25rem] pc:w-[40rem] pc:h-[40rem]"
              >
                <NsImage
                  imageUrl={image}
                  storeImage
                  style={{ width: "100%", height: "100%" }}
                />
              </div>
            );
          })}
        </Slider>
      </div>
      <div className="mt-[2rem] flex justify-between items-end pc:items-start pc:ml-[2rem]">
        <div>
          <div className={`inline-block ${pickType === "none" && "hidden"}`}>
            <PickLabel
              type="label"
              pickType={pickType}
              categoryKr={productCategory}
              labelStyle="mb-[0.4rem] pc:mb-[2rem] pc:text-body-5 pc:px-[0.8rem] pc:py-[0.4rem]"
            />
          </div>
          <h1 className="font-bold text-heading-5 pc:text-heading-4">
            {brandName} {goodsName} {modelName}
          </h1>

          {/* PC 가격 */}
          <Heading level={5} className="hidden pc:block pc:mt-[0.4rem]">
            {getPriceString(price)}
          </Heading>

          {reviewAvg && reviewCnt ? (
            <div
              className="mt-[0.4rem] cursor-pointer"
              onClick={() => {
                onClickReviewButton && onClickReviewButton();
              }}
            >
              <StarRating
                rating={reviewAvg}
                styleFor={{
                  size: 1.3,
                }}
                text={
                  <Text
                    type="B5"
                    className="text-gray-10 ml-[0.8rem] flex items-center"
                  >
                    {reviewCnt}개의 구매후기 & 리뷰
                    <span className="ml-[0.8rem]">
                      <Caret size={12} color="#3A3A3A" />
                    </span>
                  </Text>
                }
              />
            </div>
          ) : (
            ""
          )}

          {/* PC 구매하기 버튼 */}
          <div className="hidden pc:block">
            <Button
              size="xl"
              type="cta"
              className="w-[30rem]"
              onClick={() => {
                onClickPayButton();
              }}
            >
              구매하기
            </Button>
          </div>
        </div>

        {/* 모바일 공유하기 버튼 */}
        <div className="text-center pc:hidden">
          <Button
            type="icon"
            color="gray"
            icon={<Share size="2.4rem" />}
            onClick={() => {
              onClickShareButton();
            }}
          >
            공유
          </Button>
        </div>
      </div>

      {/* PC 버튼 */}
      <PcButtons
        onClickBookmarkButton={onClickBookmarkButton}
        onClickCompareButton={onClickCompareButton}
        onClickShareButton={onClickShareButton}
        likeCount={likeCount}
        likeStatus={likeStatus}
        compareStatus={compareStatus}
      />
    </div>
  );
};

export default ProductDetailTitle;

const PcButtons = ({
  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="hidden pc:flex w-[4rem] h-[40rem] flex-col justify-center items-center ml-[3rem] space-y-[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={
            isLiked ? (
              <ComparisonPressed size="3rem" />
            ) : (
              <ComparisonDefault size="3rem" />
            )
          }
          onClick={() => {
            onClickCompareButton();
            onCompareStatus(!isCompared);
          }}
        >
          비교함
        </Button>
      )}
    </div>
  );
};