import React, { useState, useEffect } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import UserDataCard from '../components/UserHistory/UserDataCard';
import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
import SearchButton from "../components/UserHistory/SearchButton";
import Fallback from '../components/UserHistory/Fallback';

const UserHistory = () => {
  const [userId, setUserId] = useState('0');
  const [userData, setUserData] = useState({});
  const [rentData, setRentData] = useState([]);

  useEffect(() => {
    // TODO: componentDidMount > 쿼리 검사하기
  },[]);

  useEffect(() => {
    if(Number(userId)<0) return;
    fetch(`http://1.201.143.67:5901/user/${userId}`)
      .then(r => r.json())
      .then(d => {
        if(!d.success) setUserId('0'); // 유효하지 않은 userId인 경우
        if(d.data && d.data.length) setUserData(d.data[0]);

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

  return (
    <div className="content">
      <Grid fluid>
        <Row>
          <Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}>
            <SearchButton setUserId={setUserId}/>
          </Col>
        </Row>
        {
          Number(userId)>0
            ? (
              <Row>
                <Col md={12}>
                  <UserDataCard userId={userId} userData={userData}/>
                </Col>
                <Col md={12}>
                  <UserHistoryCard userId={userId} rentData={rentData}/>
                </Col>
              </Row>
            )
            : (
              <Row>
                <Col md={8} mdOffset={2}>
                  <Fallback userId={userId}/>
                </Col>
              </Row>
            )
        }
      </Grid>
    </div>
  );
};

export default UserHistory;