import debug from "debug";

import { css, html, LitElement, PropertyValueMap } from "lit";

import { customElement, property, queryAsync, state } from "lit/decorators.js";

import color from "onecolor";

import { ClientCoord, pickerFloat } from "./floating_color_picker";

export { Slider } from "@material/mwc-slider";

const log = debug("control.color");

type int8 = number;

@customElement("light9-color-picker")

export class Light9ColorPicker extends LitElement {

  static styles = [

    css`

      :host {

        position: relative;

        display: flex;

        align-items: center;

        flex-wrap: wrap;

        user-select: none;

      }

      #swatch {

        display: inline-block;

        width: 50px;

        height: 30px;

        margin-right: 3px;

        border: 1px solid #333;

      }

      mwc-slider {

        width: 160px;

      }

      #vee {

        display: flex;

        align-items: center;

      }

    `,

  ];

  render() {

    return html`

      <div id="swatch" style="background-color: ${this.color}; border-color: ${this.hueSatColor}" @mousedown=${this.startFloatingPick}></div>

      <span id="vee"> V: <mwc-slider id="value" .value=${this.value} step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>

    `;

  }

  // Selected color. Read/write. Equal to value*hueSatColor. Never null.

  @property() color: string = "#000";

  @state() hueSatColor: string = "#fff"; // always full value

  @state() value: int8 = 0;

  @queryAsync("#swatch") swatchEl!: Promise<HTMLElement>;

  connectedCallback(): void {

    super.connectedCallback();

    pickerFloat.pageInit();

  }

  update(changedProperties: PropertyValueMap<this>) {

    super.update(changedProperties);

    if (changedProperties.has("color")) {

      this.setColor(this.color);

    }

    if (changedProperties.has("value") || changedProperties.has("hueSatColor")) {

      this.dispatchEvent(new CustomEvent("input", { detail: { value: this.color } }));

      this.swatchEl.then((sw) => {

        sw.style.borderColor = this.hueSatColor;

      });

    }

  }

  private onVSliderChange(ev: CustomEvent) {

    this.value = ev.detail.value;

  }

  // for outside users of the component

  setColor(col: string) {

    if (col === null) throw new Error("col===null");

    if (typeof col !== "string") throw new Error("typeof col=" + typeof col);

    this.value = color(col).value() * 255;

    // don't update this if only the value changed, or we desaturate

    this.hueSatColor = color(col).value(1).hex();

  }

  private startFloatingPick(ev: MouseEvent) {

    if (this.value < (20 as int8)) {

      log("boost");

      this.value = 255 as int8;

    }

    pickerFloat.startPick(new ClientCoord(ev.clientX, ev.clientY), this.color, (hsc: string) => {

      this.hueSatColor = hsc;

    });

  }

}