import { Divider, Space, Tag, Timeline } from "antd";
import moment from "moment";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  setBreadcrumbs,
  setSelectedHeader,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});

export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);

export function DmsLogEvents({ socket, logs, bodyshop }) {
  return (
    <Timeline pending
    reverse={true}
    >
      {logs.map((log, idx) => (
        <Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
          <Space wrap align="start" style={{}}>
            <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
            <span>{moment(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
            <Divider type="vertical" />
            <span>{log.message}</span>
          </Space>
        </Timeline.Item>
      ))}
    </Timeline>
  );
}

function LogLevelHierarchy(level) {
  switch (level) {
    case "TRACE":
      return "pink";
    case "DEBUG":
      return "orange";
    case "INFO":
      return "blue";
    case "WARNING":
      return "yellow";
    case "ERROR":
      return "red";
    default:
      return 0;
  }
}