import { useEffect } from "react";
import { useParams } from "react-router-dom";
import styled from 'styled-components'
import { useState } from "react";
// let YellowBtn = styled.button`
// background : ${props => props.bg};
// color : ${props => props.bg == 'blue' ? 'white' : 'black'};
// padding : 10px;
// `
/* eslint-disable jsx-a11y/alt-text */
function Detail(props) {
//useEffect 쓰는 이유
//먼저 useEffect안에 있는 코드는 html렌더링 후에 동작
let [count , setCount] = useState(0)
let [ alert, setAlert ] = useState(true);
let [ num , setNum] = useState('')
useEffect(()=>{
let timer = setTimeout(()=>{ setAlert(false) }, 2000);
console.log(2)
return ()=>{
console.log(1)
clearTimeout(timer)
}
},[]);
// useEffect(()=>{}) 1. 재랜더링마다 코드실행하고 싶으면
// useEffect(()=>{}, []) 2.mount시 1회 코드실행하고 싶으면
// useEffect(()=>{
// return () =>{ 3.unmount시 1회 코드실행하고 싶으면
// }
// },[])
useEffect(()=>{
if (isNaN(num) === true){
alert('그러지마세요')
}
}, [num])
let {id}=useParams();
let product = props.shoes.find(function(x){
return x.id == id
});
return (
<div className="container">
{
alert === true
? (<div className="alert alert-warning">
<p>2초 이내 구매시 할인</p>
</div>)
: null
}
{count}
{/* <YellowBtn bg="blue">버튼</YellowBtn> */}
<button onClick={()=>{ setCount(count+1) }}>버튼</button>
<div className="row">
<div className="col-md-6">
<img src="">
</div>
<div className="col-md-6">
<input onChange={(e) => setNum(e.target.value)}></input>
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{product.content}</p>
<p>{product.price}원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
export default Detail;
