import React from "react";
import {Table} from "react-bootstrap";
import { Card } from "components/Card/Card.jsx";
import { tdArray } from "variables/Variables.jsx";

const UserDataKey = {
  user_id: '유저ID',
  rent_datetime: '대여 시각',
  return_datetime: '반납 시각',
  rental_time: '대여 시간',
  rental_distance: '이동 거리',
  rental_fee: '대여 금액',
};

class KickboardHistoryTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch(`http://1.201.143.67:5901/kickboard/rent/${this.props.kbId}`)
      .then(r => r.json())
      .then(d => {
        if(d.data && d.data.length) this.setState({data: d.data});
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <Card
        title={`${this.props.kbId}번 킥보드 사용자 히스토리`}
        ctTableFullWidth
        ctTableResponsive
        content={
          <Table striped hover>
            <thead>
            <tr>
              {Object.values(UserDataKey).map((prop, key) => {
                return <th key={key}>{prop}</th>;
              })}
            </tr>
            </thead>
            <tbody>
            {this.state.data.map((data, idx) => (
              <tr key={idx}>
                <td>{data.user_id}</td>
                <td>{data.rent_datetime}</td>
                <td>{data.return_datetime}</td>
                <td>{data.rental_time}</td>
                <td>{data.rental_distance}</td>
                <td>{data.rental_fee}</td>
              </tr>
            ))}
            </tbody>
          </Table>
        }
      />
    )
  }
};

export default KickboardHistoryTable;