import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, query } from "lit/decorators";
import type { DemoCardConfig } from "../../components/demo-card";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import type {
  GlanceCardConfig,
  GlanceConfigEntity,
} from "../../../../src/panels/lovelace/cards/types";
import "../../components/demo-cards";
import { mockIcons } from "../../../../demo/src/stubs/icons";

const ENTITIES = [
  {
    entity_id: "device_tracker.demo_paulus",
    state: "home",
    attributes: {
      source_type: "gps",
      latitude: 32.877105,
      longitude: 117.232185,
      gps_accuracy: 91,
      battery: 71,
      friendly_name: "Paulus",
    },
  },
  {
    entity_id: "media_player.living_room",
    state: "playing",
    attributes: {
      volume_level: 1,
      is_volume_muted: false,
      media_content_id: "eyU3bRy2x44",
      media_content_type: "movie",
      media_duration: 300,
      media_position: 45.017773,
      media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
      media_title: "♥♥ The Best Fireplace Video (3 hours)",
      app_name: "YouTube",
      sound_mode: "Dummy Music",
      sound_mode_list: ["Dummy Music", "Dummy Movie"],
      shuffle: false,
      friendly_name: "Living Room",
      entity_picture:
        "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
      supported_features: 115597,
    },
  },
  {
    entity_id: "sun.sun",
    state: "below_horizon",
    attributes: {
      next_dawn: "2018-07-19T20:48:47+00:00",
      next_dusk: "2018-07-20T11:46:06+00:00",
      next_midnight: "2018-07-19T16:17:28+00:00",
      next_noon: "2018-07-20T04:17:26+00:00",
      next_rising: "2018-07-19T21:16:31+00:00",
      next_setting: "2018-07-20T11:18:22+00:00",
      elevation: 67.69,
      azimuth: 338.55,
      friendly_name: "Sun",
    },
  },
  {
    entity_id: "cover.kitchen_window",
    state: "open",
    attributes: {
      friendly_name: "Kitchen Window",
      supported_features: 11,
    },
  },
  {
    entity_id: "light.kitchen_lights",
    state: "on",
    attributes: {
      friendly_name: "Kitchen Lights",
    },
  },
  {
    entity_id: "light.ceiling_lights",
    state: "off",
    attributes: {
      friendly_name: "Ceiling Lights",
    },
  },
  {
    entity_id: "lock.kitchen_door",
    state: "locked",
    attributes: {
      friendly_name: "Kitchen Door",
    },
  },
];

type LegacyNullNameGlanceCardConfig = Omit<GlanceCardConfig, "entities"> & {
  type: GlanceCardConfig["type"];
  entities: (
    | string
    | GlanceConfigEntity
    | (Omit<GlanceConfigEntity, "name"> & { name: null })
  )[];
};

const CONFIGS = [
  {
    heading: "Basic example",
    config: {
      type: "glance",
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "No state colors",
    config: {
      type: "glance",
      state_color: false,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "With title",
    config: {
      type: "glance",
      title: "Custom title",
      columns: 4,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "Custom number of columns",
    config: {
      type: "glance",
      columns: 7,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "No entity names",
    config: {
      type: "glance",
      columns: 4,
      show_name: false,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "No state labels",
    config: {
      type: "glance",
      columns: 4,
      show_state: false,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "No names and no state labels",
    config: {
      type: "glance",
      columns: 4,
      show_name: false,
      show_state: false,
      entities: [
        "device_tracker.demo_paulus",
        "media_player.living_room",
        "sun.sun",
        "cover.kitchen_window",
        "light.kitchen_lights",
        "lock.kitchen_door",
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "Custom name + custom icon",
    config: {
      type: "glance",
      columns: 4,
      entities: [
        {
          entity: "device_tracker.demo_paulus",
          name: "¯\\_(ツ)_/¯",
          icon: "mdi:home-assistant",
        },
        {
          entity: "media_player.living_room",
          name: "¯\\_(ツ)_/¯",
          icon: "mdi:home-assistant",
        },
      ],
    },
  },
  {
    heading: "Selectively hidden name",
    config: {
      type: "glance",
      columns: 4,
      entities: [
        "device_tracker.demo_paulus",
        { entity: "media_player.living_room", name: null },
        "sun.sun",
        { entity: "cover.kitchen_window", name: null },
        "light.kitchen_lights",
        { entity: "lock.kitchen_door", name: null },
        "light.ceiling_lights",
      ],
    },
  },
  {
    heading: "Custom tap action",
    config: {
      type: "glance",
      columns: 4,
      entities: [
        {
          entity: "lock.kitchen_door",
          name: "Custom",
          tap_action: { action: "toggle" },
        },
        {
          entity: "light.ceiling_lights",
          name: "Custom",
          tap_action: {
            action: "perform-action",
            perform_action: "light.turn_on",
            data: { entity_id: "light.ceiling_lights" },
          },
        },
        { entity: "sun.sun", name: "Regular" },
        { entity: "light.kitchen_lights", name: "Regular" },
      ],
    },
  },
] satisfies DemoCardConfig<GlanceCardConfig | LegacyNullNameGlanceCardConfig>[];

@customElement("demo-lovelace-glance-card")
class DemoGlanceEntity extends LitElement {
  @query("#demos") private _demoRoot!: HTMLElement;

  protected render(): TemplateResult {
    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

  protected firstUpdated(changedProperties: PropertyValues<this>) {
    super.firstUpdated(changedProperties);
    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
    mockIcons(hass);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "demo-lovelace-glance-card": DemoGlanceEntity;
  }
}
