/* global React */
const { useState: useS_p, useEffect: useE_p, useRef: useR_p } = React;

function Product({ id }) {
  const { products, navigate, addToCart } = useStore();
  const product = products.find(p => p.id === id) || products[0];

  const [size, setSize] = useS_p(null);
  const [activeImg, setActiveImg] = useS_p(0);
  const [flash, setFlash] = useS_p(false);
  const [warn, setWarn] = useS_p(false);

  const onAdd = () => {
    if (!size) { setWarn(true); setTimeout(()=>setWarn(false), 1800); return; }
    addToCart(product.id, size, 1);
    setFlash(true);
    setTimeout(()=>setFlash(false), 600);
  };

  const related = products.filter(p => p.id !== product.id).slice(0, 4);

  return (
    <div className="page">
      <div className="product-page">
        {/* GALLERY */}
        <div className="gallery">
          <div className="thumb-strip">
            {product.gallery.map((src, i) => (
              <button key={i} className={i === activeImg ? "active" : ""} onClick={()=>setActiveImg(i)}>
                <img src={src} alt=""/>
              </button>
            ))}
          </div>
          <div className="main-img">
            <img src={product.gallery[activeImg]} alt={product.name} key={activeImg}
              style={{animation:"fadeIn .35s ease"}}/>
          </div>
        </div>

        {/* INFO */}
        <div className="product-info">
          <div className="crumbs">
            <a href="#home" onClick={(e)=>{e.preventDefault();navigate("home");}}>Главная</a>
            {" / "}
            <a href="#catalog" onClick={(e)=>{e.preventDefault();navigate("catalog");}}>Каталог</a>
            {" / "}
            <span style={{color:"var(--white)"}}>{product.name}</span>
          </div>

          <h1>{product.name}</h1>
          <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:24}}>
            БАЗА · {product.nameEn}
          </div>

          <p style={{fontFamily:"var(--f-display)",fontWeight:300,fontSize:16,lineHeight:1.6,color:"var(--gray)",marginBottom:28,maxWidth:440}}>
            {product.desc}
          </p>

          <div className="price-lg">{product.price.toLocaleString("ru-RU")} ₽</div>

          <div style={{marginBottom:30}}>
            <div className="field-label" style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
              <span>Размер {size && <span style={{color:"var(--gold)",marginLeft:10}}>· {size}</span>}</span>
              <a href="#" style={{color:"var(--gray-2)",textTransform:"uppercase",fontSize:10,letterSpacing:".24em",borderBottom:"1px solid var(--line)",paddingBottom:2}} onClick={e=>e.preventDefault()}>
                Размерная сетка
              </a>
            </div>
            <div className="size-grid">
              {["XS","S","M","XS-S","S-M"].map(s => {
                const avail = product.sizes.includes(s);
                return (
                  <button key={s}
                    className={`size-btn ${size===s?"active":""} ${!avail?"disabled":""}`}
                    onClick={()=>avail && setSize(s)}>
                    {s}
                  </button>
                );
              })}
            </div>
            {warn && (
              <div style={{marginTop:14,fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",color:"var(--gold)"}}>
                ← Выберите размер
              </div>
            )}
          </div>

          <button className={`btn btn-gold btn-block ${flash?"flash":""}`} onClick={onAdd} style={{padding:"26px 32px"}}>
            <span>В корзину</span>
            <span className="arrow">→</span>
          </button>

          <button className="btn btn-ghost btn-block" style={{marginTop:12,padding:"22px 32px"}}>
            <span>Купить в один клик</span>
          </button>

          <dl className="composition">
            <dt>Состав</dt>
            <dd>{product.composition}</dd>
            <dt>Уход</dt>
            <dd>{product.care}</dd>
            <dt>Доставка</dt>
            <dd>СДЭК по РФ — 350 ₽. Бесплатно от 12 000 ₽.</dd>
            <dt>Производство</dt>
            <dd>Россия. Малая партия, 60 единиц на размер.</dd>
          </dl>
        </div>
      </div>

      {/* You might like */}
      <section style={{padding:"100px 0 120px",borderTop:"1px solid var(--line)",marginTop:60,position:"relative"}}>
        <div style={{maxWidth:"var(--maxw)",margin:"0 auto",padding:"0 40px",display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:50}}>
          <h2 className="h-display" style={{fontSize:36}}>Может подойти</h2>
          <a href="#catalog" onClick={(e)=>{e.preventDefault();navigate("catalog");}}
            className="mono caps" style={{fontSize:11,color:"var(--gold)",borderBottom:"1px solid var(--gold)",paddingBottom:4}}>
            Весь каталог →
          </a>
        </div>
        <div className="h-scroll">
          {related.map((p, i) => (
            <a key={p.id} className="product-card" href={`#product/${p.id}`}
              onClick={(e)=>{e.preventDefault();navigate(`product/${p.id}`);}}>
              <div className="product-media">
                <img className="main" src={p.img[0]} alt={p.name}/>
                <img className="alt" src={p.img[1]} alt=""/>
              </div>
              <div className="product-meta">
                <div className="name">{p.name}</div>
                <div className="price">{p.price.toLocaleString("ru-RU")} ₽</div>
              </div>
            </a>
          ))}
          <div style={{flex:"0 0 40px"}}></div>
        </div>
      </section>
    </div>
  );
}

window.Product = Product;