// 변경 전
// 원래 이런코드는 아니였는데, 좀 더 확연한 차이를 보기 위해 살짝 수정했다.
function calcDiscount(price, coupon){
  let totalPrice = null;
  if(coupon){
    if(coupon.type === 'rate'){
      totalPrice = price - ((coupon.discountRate/100)*price);
    }else if(coupon.type === 'amount'){
      totalPrice = price - coupon.discountAmount;
    }
  }else{
    totalPrice = price;
  }
  return totalPrice;
}

// 변경 후
function calcDiscount(price, coupon){
  if(!coupon) return price;
  if(coupon.type === 'rate') return price - ((coupon.discountRate/100)*price);
  if(coupon.type === 'amount') return price - coupon.discountAmount;  
}

// 컨테이너 컴포넌트 HomeContainer.js
function HomeContainer(){
  const {hotItems, cart} = SetHotItmes();
  const dispatch = useDispatch();
  const insertCart = useCallback((data) => {
    dispatch(Actions.insertCart(data))
  }, [dispatch])
  const deleteCart = useCallback((id) => {
    dispatch(Actions.deleteCart(id))
  }, [dispatch])
  return <Home 
            hotItems={hotItems} 
            cart={cart}
            insertCart={insertCart}
            deleteCart={deleteCart}
          />;
}

function SetHotItmes(){
  const 
    {data : {productItems}, cart} = useSelector((state) => ({
      data : state.data,
      cart : state.cart
    }), (left, right) => {
      // App에서도 같은 부분이므로 하나로 합칠필요 있음.
      const leftString = Object.entries(left.cart).toString();
      const rightString = Object.entries(right.cart).toString();
      if(leftString !== rightString) return false;
      return true;
    });
  
  const hotItems = [...productItems].splice(0,3);

  return {hotItems, cart};
}

// 홈은 app에게 상속받는 props값이 없기 때문에, 이후에는 app으로 인한 렌더링이 필요 없음
export default React.memo(HomeContainer, () => true);

// 프리젠테이셔널 컴포넌트 Home.js
function Home({hotItems, insertCart, deleteCart, cart}){
  return(
    <div className="home routeComp">
      <div className="section">
        <div className="sectionTitle">인기강의 TOP3</div>
        <div className="hotItems sectionContent">
          {
            hotItems.map((item, index) => {
              return(
                <ProductsItem 
                  data={item} 
                  id={item.id}
                  key={item.id+index}
                  cart={cart}
                  insertCart={insertCart}
                  deleteCart={deleteCart}
                />
              )
            })
          }
        </div>
      </div>
    </div>
  )
};

export default Home;