const { useState } = React

//You can change this to alter the default image (or just fill out the form)
const defaultImage = "https://media.giphy.com/media/BSx6mzbW1ew7K/giphy.gif"

const App = () => {
	const [imgURL, setImgURL] = useState(defaultImage)
	
	const handleSubmit = (e, url) => {
		console.log(e, url)
		e.preventDefault()
		setImgURL(url)
	}
	
	return(
		<>
			<ImgInput imgURL={imgURL} handleSubmit={handleSubmit}/>
			<ul>
				<Filter src={imgURL}/>
				<Filter type="sepia" max={1} default={0.7} src={imgURL}/>
				<Filter type="blur" max={12} default={2} unit="px" src={imgURL}/>
				<Filter type="contrast" max={500} default={50} unit="%" src={imgURL}/>
				<Filter type="saturate" max={10} default={2} src={imgURL}/>
				<Filter type="hue-rotate" max={360} default={180} unit="deg" src={imgURL}/>
				<Filter type="grayscale" max={100} default={100} unit="%" src={imgURL}/>
				<Filter type="brightness" max={5} default={1.5} src={imgURL}/>
				<Filter type="invert" max={1} default={1} src={imgURL}/>
				<Filter type="opacity" max={1} default={0.5} src={imgURL}/>
			</ul>
		</>
	)
}


//ImgInput element; handles the URL input, button, and change/submit events
const ImgInput = (props) => {
	const [inputValue, setInputValue] = useState(props.imgURL)
	
	const handleInputChange = (e) => {
		e.preventDefault()
		setInputValue(e.target.value)
	}

	const handleClick = (e) => {
		e.target.select()
	}

	return (
		<form id="image-group" onSubmit={(e) => props.handleSubmit(e, inputValue) }>
			<label htmlFor="imageURL">Image URL:</label>
			<input 
				type="url"
				id="imageURL"
				value={inputValue}
				onChange={handleInputChange}
				onClick={handleClick}
			/>
			<button type="submit">Apply</button>
		</form>
	)
}

//Filter reusable component for CSS filters
const Filter = (props) => {
	const { type, min, max, unit, src } = props
	const [filterVal, setFilterVal] = useState(props.default)
	const filterToReadableString = () => {
		if (type) return `${type}(${filterVal}${unit ? unit : ''});`
		return 'none;'
	}
	const filterCSS = { filter: `${type}(${filterVal}${unit ? unit : ''})`}
	
	return(
		<li className="filter-group" id={type + '-group'}>
			<div className="flex-wrapper">
				<label htmlFor={type}>{type || 'Original'}</label>
				{type &&
					<input
						type="range"
						id={type}
						min={min ? min : 0 }
						max={max}
						step="0.01"
						onChange={(e) => setFilterVal(e.target.value)}
						value={filterVal}
					/>
			 }
			</div>
			<img src={src} alt="" style={filterCSS}/>
			<pre>filter: { filterToReadableString() }</pre>
		</li>
	)
}

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