import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';

import { colorContainerStyles } from '../panel/color-panel.js';

export class EdgelessColorCustomButton extends LitElement {
  static override styles = css`
    ${colorContainerStyles}

    .color-custom {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      box-sizing: border-box;
      overflow: hidden;
      padding: 2px;
      border: 2px solid transparent;
      background:
        linear-gradient(var(--c, transparent), var(--c, transparent))
          content-box,
        linear-gradient(var(--b, transparent), var(--b, transparent))
          padding-box,
        conic-gradient(
            from 180deg at 50% 50%,
            #d21c7e 0deg,
            #c240f0 30.697514712810516deg,
            #434af5 62.052921652793884deg,
            #3cb5f9 93.59999656677246deg,
            #3ceefa 131.40000343322754deg,
            #37f7bd 167.40000128746033deg,
            #2df541 203.39999914169312deg,
            #e7f738 239.40000772476196deg,
            #fbaf3e 273.07027101516724deg,
            #fd904e 300.73712825775146deg,
            #f64545 329.47510957717896deg,
            #f040a9 359.0167021751404deg
          )
          border-box;
    }
  `;

  override render() {
    return html`
      <div class="color-container" ?active=${this.active}>
        <div class="color-unit color-custom"></div>
      </div>
    `;
  }

  @property({ attribute: false })
  accessor active!: boolean;
}

declare global {
  interface HTMLElementTagNameMap {
    'edgeless-color-custom-button': EdgelessColorCustomButton;
  }
}
