import React from "react";
import { Card } from "components/Card/Card.jsx";
import {Col, Row} from "react-bootstrap";
import styled from "styled-components"
import moment from "moment";

const UserData = styled.div`
  padding: 4px 0;
  font-size: 15px;
`;

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

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

const UserDataCard = (props) => {
  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
  const {userId, userData} = props;
  const {name, user_id, phone_number, email, created_datetime, recent_login_datetime, license_registered, card_registered} = userData;

  // card_registered: false
  // created_datetime: "2020-05-03T15:13:07.429Z"
  // email: "song@naver.com"
  // license_registered: false
  // name: "송봉수"
  // phone_number: "+821088643678"
  // recent_login_datetime: "2020-05-07T07:19:52.302Z"
  // user_id: 7569

  return (
    <Card
      title={`${userId}번 사용자`}
      stats={getStats}
      statsIcon="fa fa-history"
      content={
        <div>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>이름 : {name}</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>사용자 ID : {user_id}</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>전화번호 : {phone_number}</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>이메일 : {email}</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>가입 날짜 : {timestampToString(created_datetime)}</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>최근 로그인 날짜 : {timestampToString(recent_login_datetime)}</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>면허증 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>카드 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
            </Col>
          </Row>
        </div>
      }
    />
  );
};

export default UserDataCard;