/* eslint-disable lit/no-template-arrow */

import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/trace/hat-trace-timeline";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import type { HomeAssistant } from "../../../../src/types";
import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
import type { DemoTrace } from "../../data/traces/types";

const traces: DemoTrace[] = [
  mockDemoTrace({ state: "running" }),
  mockDemoTrace({ state: "debugged" }),
  mockDemoTrace({ state: "stopped", script_execution: "failed_conditions" }),
  mockDemoTrace({ state: "stopped", script_execution: "failed_single" }),
  mockDemoTrace({ state: "stopped", script_execution: "failed_max_runs" }),
  mockDemoTrace({ state: "stopped", script_execution: "finished" }),
  mockDemoTrace({ state: "stopped", script_execution: "aborted" }),
  mockDemoTrace({
    state: "stopped",
    script_execution: "error",
    error: 'Variable "beer" cannot be None',
  }),
  mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
  mockDemoTrace({
    state: "stopped",
    script_execution: "not_triggered",
    not_triggered: true,
    // Not-triggered traces have no trigger description.
    trigger: null,
    trace: {
      "trigger/0": [
        {
          path: "trigger/0",
          changed_variables: {
            trigger: {
              id: "0",
              idx: "0",
              alias: null,
              platform: "light.turned_on",
            },
          },
          result: {
            reason: "new_state_not_a_match",
            data: { entity_id: "light.bed_light", to_state: "off" },
          },
          timestamp: "2021-03-25T04:36:51.223693+00:00",
        },
      ],
    },
  }),
];

@customElement("demo-automation-trace-timeline")
export class DemoAutomationTraceTimeline extends LitElement {
  @property({ attribute: false }) hass?: HomeAssistant;

  protected render() {
    if (!this.hass) {
      return nothing;
    }
    return html`
      ${traces.map(
        (trace) => html`
          <ha-card .header=${trace.trace.config.alias}>
            <div class="card-content">
              <hat-trace-timeline
                .hass=${this.hass}
                .trace=${trace.trace}
                .logbookEntries=${trace.logbookEntries}
              ></hat-trace-timeline>
              <button @click=${() => console.log(trace)}>Log trace</button>
            </div>
          </ha-card>
        `
      )}
    `;
  }

  protected firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
    hass.updateTranslations("config", "en");
  }

  static styles = css`
    ha-card {
      max-width: 600px;
      margin: 24px;
    }
    .card-content {
      display: flex;
    }
    button {
      position: absolute;
      top: 0;
      right: 0;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "demo-automation-trace-timeline": DemoAutomationTraceTimeline;
  }
}
