[TIL/React] 2023/10/05

import React from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
import styled from "@emotion/styled";
import { shoppingData } from "../data/ShoppingCategory_Pork";
import ComponentWrapper from "../components/common/ComponentWrapper";
import { useSelector } from "react-redux";

const ProductDetailPageBackgroundStyle = styled.div`
  background-color: #181818;
  width: 100%;
  /* height: 100vh; */
`;

const AllContentWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  /* flex-grow: 1; */
  /* background-color: white; */
  @media (max-width: 900px) {
    flex-wrap: wrap;
    column-gap: 20px;
  }
`;

const ProductDetailPageImgWrapper = styled.div`
  /* height: 70%;
  width: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
`;

const ProductImg = styled.img`
  width: 80%;
  height: 80%;
`;

const ProductDetailPageInfoWrapper = styled.div`
  /* width: 50%;
  height: 70%; */
  display: flex;
  flex-direction: column;
  background-color: blue;
`;

const ProductDetailPageInfoDataWrapper = styled.div`
  height: 30%;
`;

const InfoDataTitle = styled.p`
  font-size: 30px;
  color: white;
  font-weight: bolder;
`;

const InfoDataEtc = styled.p`
  font-size: 20px;
  color: white;
  font-weight: bolder;
`;

const OptionWrapper = styled.div`
  display: flex;
  align-items: center;
  column-gap: 20px;
  height: 20%;
  color: white;
`;

const AmountWrapper = styled.div`
  display: flex;
  align-items: center;
  column-gap: 20px;
  height: 20%;
  color: white;
`;

const ButtonWrapper = styled.div`
  width: 100%;
  background-color: orange;
  display: flex;
  height: 30%;
  justify-content: space-evenly;
  align-items: center;
`;

const ProductDetailPage = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const location = useLocation();
  const category = location?.state;
  const check = useSelector((state) => state.auth);
  console.log(check);

  const handleDirectClick = () => {
    if (check.isAuthenticated) {
      console.log("결제화면으로");
    } else {
      navigate("/login");
    }
  };

  const MapData = shoppingData[category];
  const DetailData = MapData.find((elem) => elem?.id === id);
  const ImgSrc = DetailData.image;

  console.log(location);
  console.log(DetailData);
  console.log(ImgSrc);

  return (
    <>
      <ProductDetailPageBackgroundStyle>
        {/*  */}
        <ComponentWrapper style={{ height: "100%" }}>
          <AllContentWrapper>
            {/* image area */}
            <ProductDetailPageImgWrapper>
              <ProductImg src={ImgSrc} />
            </ProductDetailPageImgWrapper>
            {/* info area */}
            <ProductDetailPageInfoWrapper>
              <ProductDetailPageInfoDataWrapper>
                <InfoDataTitle>{DetailData?.subtitle}</InfoDataTitle>
                <InfoDataEtc>
                  {DetailData?.price} ({DetailData?.weight})
                </InfoDataEtc>
                <p></p>
              </ProductDetailPageInfoDataWrapper>

              <OptionWrapper>
                <span style={{ color: "white", fontWeight: "bolder" }}>
                  옵션
                </span>
                <div style={{ border: "2px solid orange" }}>
                  fdsagfagfdagfdgfda
                </div>
              </OptionWrapper>
              <AmountWrapper>
                <span style={{ color: "white", fontWeight: "bolder" }}>
                  수량
                </span>
                <div style={{ border: "2px solid orange" }}>
                  fdsagfagfdagfdgfda
                </div>
              </AmountWrapper>

              <ButtonWrapper>
                <button
                  style={{
                    backgroundColor: "#7f7776",
                    color: "white",
                    width: "200px",
                    height: "60px",
                    border: "none",
                  }}
                  onClick={handleDirectClick}
                >
                  바로구매
                </button>
                <button
                  style={{
                    backgroundColor: "#c50f22",
                    color: "white",
                    width: "200px",
                    height: "60px",
                    border: "none",
                  }}
                >
                  장바구니
                </button>
              </ButtonWrapper>
            </ProductDetailPageInfoWrapper>
          </AllContentWrapper>
        </ComponentWrapper>
      </ProductDetailPageBackgroundStyle>
    </>
  );
};

export default ProductDetailPage;