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

const A = styled.a`
  color: #333;
  text-decoration: underline;
  font-weight: 500;
`;

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

function timestampToString(stamp) {
  if (!stamp) return '';
  const date = stamp.split('T')[0];
  const time = stamp.split('T')[1].split('.')[0];

  return `${date} ${time}`;
}

const KickboardHistoryTable = (props) => {
  const {kbId, historyData} = props;

  return (
    <Card
      title={`${kbId}번 킥보드 사용자 대여 히스토리`}
      ctTableFullWidth
      ctTableResponsive
      content={
        <Table striped hover>
          <thead>
          <tr>
            {Object.values(UserDataKey).map((prop, key) => {
              return <th key={key}>{prop}</th>;
            })}
          </tr>
          </thead>
          <tbody>
          {historyData.map((data, idx) => {
            const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data;
            const userHistoryUrl = `http://mate.ryulth.com/admin/user/?userId=${user_id}`;

            return (
              <tr key={idx}>
                <td><A href={userHistoryUrl}>{user_id}</A></td>
                <td>{timestampToString(rent_datetime)}</td>
                <td>{timestampToString(return_datetime)}</td>
                <td>{rental_time}분</td>
                <td>{rental_distance}km</td>
                <td>{rental_fee}원</td>
              </tr>
            );
          })}
          </tbody>
        </Table>
      }
    />
  )
};

export default KickboardHistoryTable;