import React from "react";
import { JSONLogLine, Span } from "../api-types";

const SpanFields: React.FC<{ span: Span }> = ({ span }) => {
  let fields = Object.entries(span).filter(([name, value]) => name != "name");
  if (fields.length == 0) {
    return null;
  }
  return (
    <>
      {"{"}
      {fields
        .map(([name, value]) => {
          return (
            <span key={name}>
              {name} = {value}
            </span>
          );
        })
        .reduce((prev, curr) => (
          <>
            {prev}, {curr}
          </>
        ))}
      {"}"}
    </>
  );
};

const LogSpan: React.FC<{ span: Span }> = ({ span }) => (
  <>
    <span className="font-bold">{span.name}</span>
    <SpanFields span={span} />
    <span className="font-bold">:</span>
  </>
);

const Fields: React.FC<{ fields: JSONLogLine["fields"] }> = ({ fields }) => (
  <span
    className={`m-1 ${
      fields.message.match(/error|fail/g)
        ? "text-red-500"
        : "text-slate-500 dark:text-slate-200"
    }`}
  >
    {fields.message}
    {Object.entries(fields)
      .filter(([key, value]) => key != "message")
      .map(([key, value]) => (
        <span className="m-1" key={key}>
          <span className="italic font-bold">{key}</span>={value}
        </span>
      ))}
  </span>
);

export const LogLine: React.FC<{ line: JSONLogLine }> = React.memo(
  ({ line }) => {
    const parsed = line;

    const classNameByLevel = (level: string) => {
      switch (level) {
        case "DEBUG":
          return "text-blue-500";
        case "INFO":
          return "text-green-500";
        case "WARN":
          return "text-amber-500";
        case "ERROR":
          return "text-red-500";
        default:
          return "text-slate-500";
      }
    };

    return (
      <p className="font-mono m-0 text-break text-[10px]">
        <span className="m-1 text-slate-500 dark:text-slate-400">
          {parsed.timestamp}
        </span>
        <span className={`m-1 ${classNameByLevel(parsed.level)}`}>
          {parsed.level}
        </span>

        <span className="m-1">
          {parsed.spans?.map((span, i) => <LogSpan key={i} span={span} />)}
        </span>
        <span className="m-1 text-slate-500 dark:text-slate-400">
          {parsed.target}
        </span>
        <Fields fields={parsed.fields} />
      </p>
    );
  }
);