import {
  mdiGarage,
  mdiGarageOpen,
  mdiLightbulb,
  mdiLightbulbOff,
} from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-control-switch";
import type { HaControlSwitch } from "../../../../src/components/ha-control-switch";
import type { HASSDomTargetEvent } from "../../../../src/common/dom/fire_event";
import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

const switches: {
  id: string;
  label: string;
  class?: string;
  reversed?: boolean;
  disabled?: boolean;
}[] = [
  {
    id: "switch",
    label: "Switch",
  },
  {
    id: "switch-reversed",
    label: "Switch Reversed",
    reversed: true,
  },
  {
    id: "switch-custom",
    label: "Switch and custom style",
    class: "custom",
  },
  {
    id: "switch-disabled",
    label: "Disabled Switch",
    disabled: true,
  },
];

@customElement("demo-components-ha-control-switch")
export class DemoHaControlSwitch extends LitElement {
  @state() private checked = false;

  handleValueChanged(e: HASSDomTargetEvent<HaControlSwitch>) {
    this.checked = e.target.checked;
  }

  protected render(): TemplateResult {
    return html`
      <demo-theme-comparison>
        ${THEME_COMPARISON_PANELS.map(
          ({ slot }) => html`
            <ha-card slot=${slot}>
              ${repeat(switches, (sw) => {
                const { id, label, ...config } = sw;
                return html`
                  <div class="card-content">
                    <label id="${slot}-${id}">${label}</label>
                    <pre>Config: ${JSON.stringify(config)}</pre>
                    <ha-control-switch
                      .checked=${this.checked}
                      class=${ifDefined(config.class)}
                      @change=${this.handleValueChanged}
                      .pathOn=${mdiLightbulb}
                      .pathOff=${mdiLightbulbOff}
                      .label=${label}
                      ?disabled=${config.disabled}
                      ?reversed=${config.reversed}
                    >
                    </ha-control-switch>
                  </div>
                `;
              })}
              <div class="card-content">
                <p class="title"><b>Vertical</b></p>
                <div class="vertical-switches">
                  ${repeat(switches, (sw) => {
                    const { label, ...config } = sw;
                    return html`
                      <ha-control-switch
                        .checked=${this.checked}
                        vertical
                        class=${ifDefined(config.class)}
                        @change=${this.handleValueChanged}
                        .label=${label}
                        .pathOn=${mdiGarageOpen}
                        .pathOff=${mdiGarage}
                        ?disabled=${config.disabled}
                        ?reversed=${config.reversed}
                      >
                      </ha-control-switch>
                    `;
                  })}
                </div>
              </div>
            </ha-card>
          `
        )}
      </demo-theme-comparison>
    `;
  }

  static styles = css`
    :host {
      display: block;
    }
    ha-card {
      margin: 0;
      width: 100%;
    }
    pre {
      margin-top: 0;
      margin-bottom: 8px;
    }
    p {
      margin: 0;
    }
    label {
      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --control-switch-on-color: var(--green-color);
      --control-switch-off-color: var(--red-color);
      --control-switch-thickness: 130px;
      --control-switch-border-radius: var(--ha-border-radius-6xl);
      --control-switch-padding: 6px;
      --mdc-icon-size: 24px;
    }
    .vertical-switches {
      height: 300px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    p.title {
      margin-bottom: 12px;
    }
    .vertical-switches > *:not(:last-child) {
      margin-right: 4px;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "demo-components-ha-control-switch": DemoHaControlSwitch;
  }
}
