function Header() {
  return (
    <header>
      <h1>Shop.</h1>
    </header>
  );
}

function ImageGallery(props) {
  const [image, setImage] = React.useState(0);

  return (
    <div className="image-gallery">
      <img className="image-gallery-main" src={props.images[image].src} />

      <ul class="thumbnails">
        {props.images.map((item, index) => {
          return (
            <li key={image.id} className={`thumbnails-item ${image == item.id && `thumbnails-item-active`}`}>
              <img onClick={() => setImage(item.id) } src={item.src} />
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function Product(props) {
  
  const [count, setCount] = React.useState(0);
  
  
  const addToBasket = (e) => {
    const button = e.target;
    const counter = document.querySelector('.count');
    
    setCount(count + 1);
    counter.classList.add('pulse');
    
    button.innerText = 'Added to basket!'
    button.setAttribute('disabled', true);
    
    setTimeout((e) => {
      button.removeAttribute('disabled');
      button.innerText = 'Add to basket'
      counter.classList.remove('pulse');
    }, 1000)
  }
  
  return (
    <div className="product">
      <div className="product-info">
        <h2 className="product-title ff-sans">{props.product.name}</h2>
        <h4 className="product-price ff-sans">{props.product.price}</h4>
        <button onClick={addToBasket} className="button">Add to basket</button>
      </div>
      
      <span className="offer ff-sans">20% off with voucher: FU3L3D</span>
      
      <div className="product-info">
        <hr />  
        <p className="product-description ff-serif">{props.product.description}</p>
        <hr />
      </div>
      
      <span className="count ff-sans">{count}</span>
      
    </div>
  )
}

class App extends React.Component {
  render() {
    const galleryImages = [
      {
        id: 0,
        src: `https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/polar-multi-colour-t-shirt-black-multi-1.jpg`
      },
      {
        id: 1,
        src: `https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/polar-multi-colour-t-shirt-black-multi-2.jpg`
      },
      {
        id: 2,
        src: `https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/polar-multi-colour-t-shirt-black-multi-3.jpg`
      },
    ];
    
    const productInfo = {
      name: `Polar Multi Colour T-Shirt Size L`,
      price: `$45.00`,
      description: `Adorned with multi coloured stripes, this Multi Colour T-Shirt from Polar is made from 210gsm 100% cotton and includes a black colour block curved neckline and subtle logo embroidery on the chest. The body has been cut to a regular fit whilst the short sleeves allow for varying styling possibilities. Flowing vertically down the body and at an angle on the sleeves, the stripes have been roll printed and vary between tones of green, white and yellow, alongside a decorative embroidered logo which has been stitched to sit against the design in a shade of dark green. The body has a straight finish which allows the fabric to be easily tucked into trousers or shorts.`
    }
    
    return (
      <div>
        <Header />
        
        <main className="df ait">
          <ImageGallery images={galleryImages} />
          <Product product={productInfo} />
        </main>
        
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));