import { Divider, Space, Tag, Timeline } from "antd";
import dayjs from "../../utils/day";
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}
      items={logs.map((log, idx) => ({
        key: idx,
        color: LogLevelHierarchy(log.level),
        children: (
          <Space wrap align="start" style={{}}>
            <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
            <span>{dayjs(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
            <Divider type="vertical" />
            <span>{log.message}</span>
          </Space>
        )
      }))}
    />
  );
}

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