import React, {useState, useEffect} 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: 20px;
    
    &:hover {
      background-color: #565656;
      color: white;
      cursor: pointer;
    }
`;

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

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

const kickboardDataKey = {
  battery: '배터리',
  coordinates: '킥보드 위치',
  states: '킥보드 상태',
  is_good_posture: '킥보드 자세 상태',
  total_driven_distance: '총 누적 이동 거리',
  total_driven_time: '총 누적 대여 시간',
  is_good_gps_signal: 'GPS 신호 양호 여부',
  connected: '현재 네트워크 연결 여부',
  updated_coordinates_datetime: '최근 gps 업데이트 시각',
  connection_updated_datetime: '최근 연결 업데이트 시각',
  model_name: '모델명',
  updated_datetime: '최근 업데이트 시각',
};

// "serial_number":"000165",
// "coordinates":{"x":126.64504,"y":37.39101},
// "states":"{}",
// "model_name":"MA01",
// "is_good_gps_signal":true,
// "updated_coordinates_datetime":"2020-04-19T15:27:39.427Z",
// "connection_updated_datetime":"2020-04-18T12:43:00.393Z",
// "is_good_posture":true,
// "connected":true,
// "total_driven_distance":3534,
// "total_driven_time":162636,
// "updated_datetime":"2020-06-12T10:00:28.715Z",
// "battery":72

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

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

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

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

  render() {
    const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
    const { battery, coordinates, states, is_good_posture, total_driven_distance,
      total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
      connection_updated_datetime, model_name, updated_datetime } = this.state.data;

    return (
      <Card
      title={`${this.props.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>
            <KickboardData>{kickboardDataKey.battery} : {battery}%</KickboardData>
            <KickboardData>{kickboardDataKey.coordinates} : {JSON.stringify(coordinates)}</KickboardData>
            <KickboardData>{kickboardDataKey.states} : {states}</KickboardData>
            <KickboardData>{kickboardDataKey.is_good_posture} : {is_good_posture ? '양호' : '불량'}</KickboardData>
            <KickboardData>{kickboardDataKey.total_driven_distance} : {total_driven_distance}</KickboardData>
            <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData>
            <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal  ? '양호' : '불량'}</KickboardData>
            <KickboardData>{kickboardDataKey.connected} : {connected  ? '연결됨' : '연결되지 않음'}</KickboardData>
            <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {makeTimestampToString(updated_coordinates_datetime)}</KickboardData>
            <KickboardData>{kickboardDataKey.connection_updated_datetime} : {makeTimestampToString(connection_updated_datetime)}</KickboardData>
            <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData>
            <KickboardData>{kickboardDataKey.updated_datetime} : {makeTimestampToString(updated_datetime)}</KickboardData>
          </KickboardDataList>
        </Row>
      }
      />
    );
  }
};

export default KickboardStatusCard;