content: import React, { Component } from 'react';
  import { withRouter } from 'react-router-dom';
  import queryString from 'query-string';
  
  import Work from '../../Work';
  import Checkbox from '../../Elements/Checkbox';
  
  import workContent from '../../../content/work';
  
  import './WorkFilter.css';
  
  const filterWork = (filters) => {
  	let filtered = workContent.filter( work => {
  			return filters.some(function (v) {
  		        return work.type.indexOf(v) >= 0;
  		    });
  		}
  	)
  
  	return filtered;
  }
  
  class WorkFilter extends Component {
  
  	constructor(props) {
  		super(props);
  
  		let params = queryString.parse(window.location.search);
  		let work = workContent;
  
  		if (params.types) {
  			params.types = params.types.split(',');
  			work = filterWork(params.types);
  		}
  
  		this.state = {
  			types: {
  				branding: {
  					label: 'Branding',
  					checked: params.types ? params.types.indexOf('branding') > -1 : true
  				}, 
  
  				digital: {
  					label: 'Digital',
  					checked: params.types ? params.types.indexOf('digital') > -1 : true
  				}, 
  
  				motion: {
  					label: 'Motion',
  					checked: params.types ? params.types.indexOf('motion') > -1 : true
  				}
  			},
  			work: work
  		}
  
  		this.handleChange = (e) => {
  
  			// Immutable copy of state
  			let newState = {...this.state};
  
  			// Flip checked state
  			newState.types[e.target.id].checked = !newState.types[e.target.id].checked
  
  			let params = Object.keys(newState.types).filter(type => newState.types[type].checked);
  
  			// Set new state, then update URL
  			this.setState(newState, () => {
  
  				this.props.history.push(
  					params.length > 0 
  						? `/work?types=${params.join(',')}` 
  						: '/work'
  				);
  			});
  		}
  	}
  
  	render() {
  
  		if (this.props.featured) {
  			return null;
  		}
  
  		let types = this.state.types;
  
  		return (
  			<React.Fragment>
  				<header className="work-intro" data-slug={this.props.slug}>
  					<div className="filter">
  						{Object.keys(types).map((type, i) => {
  							return (
  								<Checkbox 
  								dataAnimate={Object.keys(types).length - i}
  								checked={types[type].checked} 
  								key={i} 
  								id={type} 
  								handleChange={this.handleChange} 
  								label={types[type].label} />
  							);
  						})}
  					</div>
  					<style dangerouslySetInnerHTML={{__html: `
  						[data-slug="${this.props.slug}"] .checkbox label span:after, [data-slug="${this.props.slug}"] .checkbox label span:before { background-color: ${this.props.secondaryColor} }
  					`}} />
  				</header>
  				<Work work={this.state.work} />
  			</React.Fragment>
  		)
  	}
  }
  
  export default withRouter(WorkFilter);