/* global React */
// Gallery
const { useState } = React;
const NS_G = window.GamekeepersCottageDesignSystem_070bc7;
const { Eyebrow, Button } = NS_G;
const useShell = window.GKuseShell;
const IMG = window.GK_IMG;

const CATS = [
  ['All', null],
  ['The cottage', 'cottage'],
  ['Interiors', 'interior'],
  ['Garden & woodland', 'garden'],
  ['Wildlife', 'wildlife'],
];
const PHOTOS = [
  [IMG.heroExterior, 'The cottage', 'cottage'], [IMG.exterior1, 'Front of the cottage', 'cottage'],
  [IMG.drive, 'The drive', 'cottage'], [IMG.aerial, 'Aerial view', 'cottage'],
  [IMG.exterior4, 'Cottage & grounds', 'cottage'], [IMG.cottage02, 'In the clearing', 'cottage'],
  [IMG.living1, 'Sitting room', 'interior'], [IMG.living2, 'By the log burner', 'interior'],
  [IMG.dining, 'Dining room', 'interior'], [IMG.kitchen, 'Kitchen', 'interior'],
  [IMG.kitchen2, 'Kitchen view', 'interior'], [IMG.doubleRoom, 'Double bedroom', 'interior'],
  [IMG.twinRoom, 'Twin bedroom', 'interior'], [IMG.singleRoom, 'Single bedroom', 'interior'],
  [IMG.bathroom, 'Bathroom', 'interior'],
  [IMG.garden, 'The garden', 'garden'], [IMG.garden2, 'Garden view', 'garden'],
  [IMG.garden3, 'Garden in summer', 'garden'], [IMG.extensiveGarden, 'Extensive grounds', 'garden'],
  [IMG.pond, 'The pond', 'garden'], [IMG.woodDen, 'Wood den', 'garden'],
  [IMG.stroll, 'A woodland stroll', 'garden'], [IMG.picnic, 'Picnic & BBQ', 'garden'],
  [IMG.toadstool, 'Toadstool', 'garden'],
  [IMG.deer, 'Deer in the garden', 'wildlife'], [IMG.squirrel, 'Squirrel', 'wildlife'],
  [IMG.pheasant, 'George the pheasant', 'wildlife'], [IMG.butterfly, 'Red admiral', 'wildlife'],
];

function GalleryContent() {
  const { openLightbox } = useShell();
  const [cat, setCat] = useState(null);
  const list = PHOTOS.filter(p => !cat || p[2] === cat).map(p => ({ src: p[0], label: p[1] }));
  return (
    <React.Fragment>
      <section className="section--tight" style={{ paddingTop: 56, paddingBottom: 8 }}>
        <div className="container">
          <Eyebrow>Gallery</Eyebrow>
          <h1 className="h1" style={{ margin: '14px 0 14px' }}>The cottage in pictures</h1>
          <p className="lead muted" style={{ maxWidth: 620 }}>The cottage, its interiors, the gardens and woodland — and the wildlife that visits. All photographs are our own.</p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
            {CATS.map(([label, key]) => (
              <button key={label} onClick={() => setCat(key)}
                className={'gk-btn gk-btn--sm ' + (cat === key ? 'gk-btn--primary' : 'gk-btn--secondary')}>{label}</button>
            ))}
          </div>
        </div>
      </section>
      <section className="section--tight" style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ columnCount: 3, columnGap: 14 }} className="masonry">
            {list.map((p, i) => (
              <div key={p.src + i} style={{ breakInside: 'avoid', marginBottom: 14 }}>
                <button type="button" onClick={() => openLightbox(list, i)} aria-label={'View photo: ' + p.label}
                  style={{ display: 'block', width: '100%', padding: 0, border: 0, background: 'none', cursor: 'zoom-in', borderRadius: 14 }}>
                  <img src={p.src} alt={p.label} loading="lazy"
                    style={{ width: '100%', borderRadius: 14, display: 'block' }} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{ textAlign: 'center', paddingTop: 24 }}>
        <Button variant="primary" size="lg" as="a" href="cottage">View cottage details &amp; availability</Button>
      </section>
      <style>{`@media(max-width:980px){.masonry{column-count:2 !important}} @media(max-width:600px){.masonry{column-count:1 !important}}`}</style>
    </React.Fragment>
  );
}

window.GKmount('gallery', GalleryContent);