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 convertQueryStringToObject = s => {
  const hashParams = {};
  let e;
  const a = /\+/g, // Regex for replacing addition symbol with a space
    r = /([^&;=]+)=?([^&;]*)/g,
    d = function(s) {
      return decodeURIComponent(s.replace(a, ' '));
    },
    q = s.replace(/\?/g, '');

  while ((e = r.exec(q))) hashParams[d(e[1])] = d(e[2]);

  return hashParams;
};

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

  useEffect(() => {
    // component did mount
    console.log('component did mount')
    const queryString = window.location.href.split('?')[1];
    const queryObject = queryString ? convertQueryStringToObject(queryString) : {};

    if(queryObject && queryObject.userId) {
      setTimeout(() => setUserId(queryObject.userId), 300)
    }
  },[]);

  useEffect(() => {
    if(Number(userId)<0) return;
    console.log(userId);
    fetch(`http://1.201.143.67:5901/user/${userId}`)
      .then(r => r.json())
      .then(d => {
        console.log(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;