import React, {useState, useEffect} from "react";
import {Grid, Row, Col} from "react-bootstrap";

import GoogleMapCard from '../components/Kickboard/GoogleMapCard';
import KickboardStatusCard from '../components/Kickboard/KickboardStatusCard';
import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable';
import SearchButton from '../components/Kickboard/SearchButton';

const Kickboard = () => {
  const [kbId, setKbId] = useState('-1');
  const [kbData, setKbData] = useState({});
  const [historyData, setHistoryData] = useState([]);

  useEffect(() => {
    fetch(`http://1.201.143.67:5901/kickboard/${kbId}`)
      .then(r => r.json())
      .then(d => {
        if(d.data && d.data.length) setKbData(d.data[0]);

        fetch(`http://1.201.143.67:5901/kickboard/rent/${kbId}`)
          .then(r => r.json())
          .then(d => {
            if(d.data && d.data.length) setHistoryData(d.data);
          })
      })
      .catch(err => console.log(err));
    },[kbId]);

  if(Number(kbId)<0) {
    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={8} mdOffset={2}>
              <GoogleMapCard setKbId={setKbId}/>
            </Col>
          </Row>
        </Grid>
      </div>
    )
  }

  // 여기 API 요청
  return (
    <div className="content">
      <Grid fluid>
        <Row>
          <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}>
            <SearchButton setKbId={setKbId}/>
          </Col>
        </Row>
        <Row>
          <Col md={6}>
            <GoogleMapCard setKbId={setKbId}/>
          </Col>
          <Col md={6}>
            <KickboardStatusCard kbId={kbId} kbData={kbData}/>
          </Col>
        </Row>
        <Row>
          <Col md={12}>
            <KickboardHistoryTable kbId={kbId} historyData={historyData}/>
          </Col>
        </Row>
      </Grid>
    </div>
  );
};

export default Kickboard;