import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import actions from "../actions";

import { takeInputValue, getWeather } from "../actions/weather";

class FetchPage extends Component {
	state = {
		foo: 1,
		files: null,
		photo: null
	};

	add = () => this.setState(prevState => ({ foo: prevState.foo + 1 }));

	change = e => {
		const { takeInputValue } = this.props;
		takeInputValue(e.target.value);
	};

	click = () => {
		const { city, getWeather } = this.props;
		getWeather(city);
	};

	change = e => {
		const reader = new FileReader();

		const file = e.target.files[0];

		this.setState({ file });

		reader.onloadend = () => {
			this.setState({
				photo: reader.result
			});
		};
		reader.readAsDataURL(file);
	};

	post = () => {
		const file = new FormData();

		file.append("profilePhoto", this.state.file);
	};

	render() {
		const { weather, error } = this.props;
		console.log("this.", this.props);
		const { photo } = this.state;
		return (
			<div className="page">
				<input className="page__input page__input--blue" type="text" onChange={this.change} />
				<button className="page__button" onClick={this.click}>
					SHOW
				</button>

				<div>
					<img src={photo} alt="asdfas" />
					<input type="file" onChange={e => this.change(e)} />
					<button onClick={this.post}>POST FILE</button>
				</div>

				<div>{weather && weather.location && weather.location.city}</div>
				<div>{error && error}</div>

				<button onClick={this.add}>PUSH ME</button>
			</div>
		);
	}
}

const mapStateToProps = state => ({
	city: state.w.city,
	weather: state.w.weather,
	error: state.w.error
});

const mapDispatchToProps = dispatch =>
	bindActionCreators({ takeInputValue, getWeather, ...actions }, dispatch);

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(FetchPage);