import React from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Facet from 'components/Facet'
import styles from './index.module.scss'
import Slider from 'react-slick';

class Section extends React.Component {
	render() {
		return (
			<section className={styles.section}>
				{this.renderImages()}
				<div className={styles.sectionContent}>
					{this.renderTitle()}
					<p>
						{this.props.blurb}
						{this.renderLink()}
					</p>
				</div>
				{this.renderFacetContainer()}
			</section>
		)
	}
	renderImages() {
		if (this.props.customizations && this.props.customizations.heroImages.length) {
			return this.renderSlider(this.props.customizations.heroImages)
		} else {
			return this.renderSlider([require(`../../${this.props.imageUrl}`)])
		}
	}
	renderSliderImages(urls) {
		return urls.map((url,i) =>
			<div key={`i${i}`} style={{ backgroundImage: `url("${url}")` }} className={styles.sectionImage}></div>
		)
	}
	renderSlider(urls) {
		const settings = {
			arrows:	false,
			accessibility: true,
			adaptiveHeight:	false,
			variableWidth: false,
			className: styles.sectionSlider,
			autoplay: urls.length > 1,
			autoplaySpeed: 5000,
			dots: true,
			dotsClass: styles.sectionSliderDots,
			infinite: true,
			lazyLoad:	true,
			slidesToShow:	1,
		}
		return (
			<Slider {...settings}>
				{this.renderSliderImages(urls)}
			</Slider>
		)
	}
	renderTitle() {
		let title = this.props.title
		const customizations = this.props.customizations
		if (customizations) {
			let suffix, names = [];
			if (customizations.guestFirstName) {
				names.push(customizations.guestFirstName)
			}
			if (customizations.additionFirstName) {
				names.push(customizations.additionFirstName)
			}
			if (customizations.includingNames) {
				names.push(customizations.includingNames)
				if (customizations.includingNames.indexOf('and ') < 0) {
					names.push(`and ${customizations.includingNames}`)
				}
				suffix = names.join(', ')
			} else {
				suffix = names.join(' and ')
			}
			title = title.replace(/(\W?$)/, ` ${suffix}$1`);
		}
		return (
			<h2>{title}</h2>
		)
	}
	renderLink() {
		if (this.props.link) {
			return <Link className={styles.sectionLink} {...this.props.link} />
		}
	}
	renderFacetContainer() {
		if (this.props.facets) {
			return (
				<ul className={styles.facets}>
					{this.renderFacets()}
				</ul>
			)
		}
	}
	renderFacets() {
		return this.props.facets.map((facet, i) =>
			<li key={`f${i}`}>
				<Facet to={this.props.link.to} {...facet} />
			</li>
		)
	}
}

Section.propTypes = {
	title: PropTypes.string.isRequired,
	imageUrl: PropTypes.string.isRequired,
}

export default Section

@@ -1193,20 +1193,31 @@
 %09%09dots: 
-true
+urls.length %3E 1
 ,%0A%09%09%09dot
@@ -1263,20 +1263,31 @@
 finite: 
-true
+urls.length %3E 1
 ,%0A%09%09%09laz
@@ -1293,19 +1293,20 @@
 zyLoad:%09
-tru
+fals
 e,%0A%09%09%09sl
@@ -1320,16 +1320,42 @@
 how:%091,%0A
+%09%09%09swipe: urls.length %3E 1%0A
 %09%09%7D%0A%09%09re

disable swipe and dots for single photos