import type { TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { customElement, state } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-control-number-buttons";
import { repeat } from "lit/directives/repeat";
import { ifDefined } from "lit/directives/if-defined";

const buttons: {
  id: string;
  label: string;
  min?: number;
  max?: number;
  step?: number;
  unit?: string;
  class?: string;
}[] = [
  {
    id: "basic",
    label: "Basic",
  },
  {
    id: "min_max_step",
    label: "With min/max and step",
    min: 5,
    max: 25,
    step: 0.5,
  },
  {
    id: "custom",
    label: "Custom",
    class: "custom",
  },
  {
    id: "unit",
    label: "With unit",
    unit: "m",
  },
];

@customElement("demo-components-ha-control-number-buttons")
export class DemoHarControlNumberButtons extends LitElement {
  @state() value = 5;

  private _valueChanged(ev) {
    this.value = ev.detail.value;
  }

  protected render(): TemplateResult {
    return html`
      ${repeat(buttons, (button) => {
        const { id, label, ...config } = button;
        return html`
          <ha-card>
            <div class="card-content">
              <label id=${id}>${label}</label>
              <pre>Config: ${JSON.stringify(config)}</pre>
              <ha-control-number-buttons
                .value=${this.value}
                .unit=${config.unit}
                .min=${config.min}
                .max=${config.max}
                .step=${config.step}
                class=${ifDefined(config.class)}
                @value-changed=${this._valueChanged}
                .label=${label}
              >
              </ha-control-number-buttons>
            </div>
          </ha-card>
        `;
      })}
    `;
  }

  static styles = css`
    ha-card {
      max-width: 600px;
      margin: 24px auto;
    }
    pre {
      margin-top: 0;
      margin-bottom: 8px;
    }
    p {
      margin: 0;
    }
    label {
      font-weight: 600;
    }
    .custom {
      color: #2196f3;
      --control-number-buttons-color: #2196f3;
      --control-number-buttons-background-color: #2196f3;
      --control-number-buttons-background-opacity: 0.1;
      --control-number-buttons-thickness: 100px;
      --control-number-buttons-border-radius: 36px;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "demo-components-ha-control-number-buttons": DemoHarControlNumberButtons;
  }
}