import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "react-bootstrap/Button";
import "./home.css";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null,
      markers: [],

      curAirCondition: null,
      routeInformation: null,
    };
  }

  render() {
    let currentAirCondition = null;
    let routeAirCondition = null;

    return (
      <section id="home">
        <div className="cover">
          <div className="Home-header">How's the Weather?!</div>
        </div>
        <div className="map_wrap">
          <div
            id="map"
            style={{ width: "1000px", height: "600px", align: "middle" }}
          ></div>
          <div id="menu_wrap" className="bg_white">
            <div className="option">
              지역 검색 :{" "}
              <input
                type="text"
                value={this.state.region}
                id="keyword"
                size="15"
                onChange={(e) => this.setState({ region: e.target.value })}
              />
              <Button variant="light" type="submit" onClick={this.searchPlaces}>
                검색하기
              </Button>
            </div>
            <ul id="placesList"></ul>
            <div id="pagination"></div>
          </div>
          <ul id="placesList"></ul>
          <div id="pagination"></div>
        </div>
        <div id="footer">
          <div className="left-box">
            <h5> 현재위치 : {this.state.region} </h5>
            <br />
            <div id="middle">{currentAirCondition}</div>
          </div>
          <div className="right-box">
            <h5>
              출발지 : {this.state.departureTitle} <br />
              도착지 : {this.state.arrivalTitle} <br />
              <Button variant="secondary" onClick={this.getRouteAirCondition}>
                {" "}
                경로별 미세먼지 정보 알아보기{" "}
              </Button>{" "}
              <br /> <br />
            </h5>
            <div id="middle">{routeAirCondition}</div>
          </div>
        </div>
      </section>
    );
  }
}