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";

// border: 1px solid #E3E3E3;
const KickboardButton = styled.div`
    font-size: 15px;
    background-color: #e7e7e7;
    border-radius: 4px;
    color: #565656;
    padding: 8px 12px;
    height: 40px;
    box-shadow: none;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10px;
    
    &:hover {
      background-color: #565656;
      color: white;
      cursor: pointer;
    }
`;

const KickboardDataList = styled.ul`
  font-size: 16px;
`;

const KickboardData = styled.li`
  padding: 3px 0;
`;

const kickboardDataKey = {
  a: '배터리',
  b: '킥보드 위치',
  c: '킥보드 상태',
  d: '킥보드 자세 여부',
  e: '총 누적 이동 거리',
  f: '총 누적 대여 시간',
  g: '신호 양호 여부',
  h: '현재 네트워크 연결 여부',
  i: '최근 gps 업데이트 시각',
  j: '최근 연결 업데이트 시각',
  k: '모델명',
  l: '최근 업데이트 시각',
};

const KickboardStatusCard = (props) => {
  const {kbId} = props;
  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;

  return (
    <Card
      title={`${kbId}번 킥보드`}
      stats={getStats}
      statsIcon="fa fa-history"
      content={
        <Row>
          <Col md={4} sm={4} xs={4}>
            <KickboardButton>경적 울리기</KickboardButton>
          </Col>
          <Col md={4} sm={4} xs={4}>
            <KickboardButton>반납하기</KickboardButton>
          </Col>
          <Col md={4} sm={4} xs={4}>
            <KickboardButton>운행 종료하기</KickboardButton>
          </Col>
          <KickboardDataList>
            {
              Object.keys(kickboardDataKey).map(key => {
                return <KickboardData>{kickboardDataKey[key]} : {key}</KickboardData>
              })
            }
          </KickboardDataList>
        </Row>
      }
    />
  );
};

export default KickboardStatusCard;