import React, { Component } from "react";

import Counter from "./counter";

import List from "./select";

const fakeArr = [
	{ id: 0, value: 0, text: "Text 1" },
	{ id: 1, value: 1, text: "Text 2" },
	{ id: 2, value: 2, text: "Text 3" },
	{ id: 3, value: 3, text: "Text 4" }
];

export default class App extends Component {
	constructor(props) {
		super(props);
		// console.log("constructor");
		this.state = {
			counter: 0,
			id: null,
			time: new Date().toLocaleTimeString(),
			random: 0,
			value: "Hello",
			textareaValue: "",
			checked: false,
			valueForSelect: 0,
			fakeArr: fakeArr,
			valueForList: fakeArr[0].value
		};

		this.handleChange = this.handleChange.bind(this);
	}

	tick = () => this.setState({ time: new Date().toLocaleTimeString() });

	// UNSAFE_componentWillMount() {
	// console.log("componentWillMount");
	// }

	static getDerivedStateFromProps(nextProps, prevState) {
		// console.log("getDerivedStateFromProps");
		return null;
	}

	async componentDidMount() {
		// console.log("componentDidMount");

		const id = setInterval(this.tick, 1000);
		console.log("id", id);
		this.setState({ id });
	}

	componentWillUnmount() {
		// console.log("componentWillUnmount");
		clearInterval(this.state.id);
	}

	shouldComponentUpdate(nextProps, nextState, nextContext) {
		// console.log("shouldComponentUpdate");
		return true;
	}

	getSnapshotBeforeUpdate(prevProps, prevState) {
		// console.log("getSnapshotBeforeUpdate");
		return null;
	}

	async componentDidUpdate(prevProps, prevState, snapshot) {
		// console.log("componentDidUpdate");
		// if (prevState.counter !== this.state.counter) {
		// 	console.log("random");
		// 	this.random();
		// }
	}

	inc = () =>
		this.setState(prevState => ({
			counter: this.random() === 5 ? prevState.counter * 2 : prevState.counter + 1
		}));

	dec = () => this.setState(prevState => ({ counter: prevState.counter - 1 }));

	random = () => this.setState({ random: Math.floor(Math.random() * 10 + 1) });
	random = () => Math.floor(Math.random() * 10 + 1);

	handleChange(e) {
		this.setState({ value: e.target.value });
	}

	onBlur = e => console.log("onBlur");
	onFocus = e => console.log("onFocus");

	handleChangeTA = e => this.setState({ textareaValue: e.target.value });

	handleChangeCH = e => this.setState({ checked: e.target.checked });

	handleSelectChange = e => this.setState({ valueForSelect: e.target.value });

	changeListValue = id =>
		this.setState(prevState => ({
			...prevState,
			valueForList: prevState.fakeArr.find(el => el.value === id).value
		}));

	render() {
		console.log("random", this.state.random);
		return (
			<div>
				<input
					type="text"
					onBlur={this.onBlur}
					onFocus={this.onFocus}
					value={this.state.value}
					onChange={this.handleChange}
				/>
				<textarea value={this.state.textareaValue} onChange={this.handleChangeTA} />
				<input type="checkbox" checked={this.state.checked} onChange={this.handleChangeCH} />
				<div>
					<p>Ваш выбор: {this.state.valueForSelect}</p>
					<select value={this.state.valueForSelect} onChange={this.handleSelectChange}>
						<option value="0">Язык HTML</option>
						<option value="1">Язык CSS</option>
						<option value="2">Язык JavaScript</option>
						<option value="3">Язык PHP</option>
					</select>
				</div>

				<input type="file" onChange={e => console.log("e", e.target.files)} />

				<div>
					<List
						options={this.state.fakeArr}
						value={this.state.valueForList}
						onChange={this.changeListValue}
					/>
				</div>
			</div>
		);
	}
}