text: import React from 'react';
  
  import AddOption from './AddOption';
  import Action from './Action';
  import Header from './Header';
  import Options from './Options';
  import OptionModal from './OptionModal';
  
  export default class IndecisionApp extends React.Component {
  	state = {
  		options: [],
  		selectedOption: undefined,
  	};
  
  	handleDeleteOptions = () => {
  		this.setState(() => ({
  			options: [],
  		}));
  	};
  
  	handlePickOptions = () => {
  		const randomNumber = Math.floor(
  			Math.random() * this.state.options.length
  		);
  		const option = this.state.options[randomNumber];
  
  		this.setState(() => ({
  			selectedOption: option,
  		}));
  	};
  
  	handleAddOptions = (option) => {
  		if (!option) return 'Enter valid value to add item';
  		else if (this.state.options.indexOf(option) > -1)
  			return 'This option already exists';
  
  		this.setState((prevState) => ({
  			options: prevState.options.concat(option),
  		}));
  	};
  
  	handleDeleteOption = (optionToRemove) => {
  		this.setState((prevState) => ({
  			options: prevState.options.filter((opt) => opt !== optionToRemove),
  		}));
  	};
  
  	handleClearSelectedOption = () => {
  		this.setState(() => ({
  			selectedOption: undefined,
  		}));
  	};
  
  	componentDidMount() {
  		try {
  			const json = localStorage.getItem('options');
  			const options = JSON.parse(json);
  
  			if (options) {
  				this.setState(() => ({
  					options,
  				}));
  			}
  
  			// console.log('fetching data!, componentDidMount');
  		} catch (err) {
  			console.log('error catch');
  		}
  	}
  
  	componentDidUpdate(prevProps, prevState) {
  		if (prevState.options.length !== this.state.options.length) {
  			const json = JSON.stringify(this.state.options);
  			localStorage.setItem('options', json);
  			// console.log('saving data, componentDidUpdate');
  		}
  	}
  
  	componentWillUnmount() {
  		// console.log('Component will unmount, componentWillUnmount');
  	}
  
  	render() {
  		const subtitle = 'Put your life in the hands of a computer';
  		return (
  			<div className="container-background">
  				<Header subtitle={subtitle} />
  				<div className="container">
  					<Action
  						hasOptions={this.state.options.length > 0}
  						onPick={this.handlePickOptions}
  					/>
  					<div className="widget">
  						{
  							<Options
  								options={this.state.options}
  								handleDeleteOptions={this.handleDeleteOptions}
  								handleDeleteOption={this.handleDeleteOption}
  							/>
  						}
  						<AddOption handleAddOption={this.handleAddOptions} />
  					</div>
  					<OptionModal
  						selectedOption={this.state.selectedOption}
  						handleClearSelectedOption={
  							this.handleClearSelectedOption
  						}
  					/>
  				</div>
  			</div>
  		);
  	}
  }
  