import*as Common from"../common/common.js";import*as ComponentHelpers from"../component_helpers/component_helpers.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import{get2DTranslationsForAngle,getAngleFromRadians,getNewAngleFromEvent,getRadiansFromAngle}from"./CSSAngleUtils.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,CLOCK_DIAL_LENGTH=6;export class CSSAngleEditor extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.angle={value:0,unit:"rad"},this.background="",this.clockRadius=38.5,this.mousemoveThrottler=new Common.Throttler.Throttler(16.67)}connectedCallback(){ComponentHelpers.SetCSSProperty.set(this,"--clock-dial-length","6px")}set data(e){this.angle=e.angle,this.onAngleUpdate=e.onAngleUpdate,this.background=e.background,this.render()}updateAngleFromMousePosition(e,t,o){const r=this.shadow.querySelector(".clock");if(!r||!this.onAngleUpdate)return;const{top:n,right:s,bottom:a,left:l}=r.getBoundingClientRect();this.clockRadius=(s-l)/2;const i=(l+s)/2,d=(a+n)/2,h=-Math.atan2(e-i,t-d)+Math.PI;if(o){const e=getRadiansFromAngle({value:15,unit:"deg"}),t=Math.round(h/e)*e;this.onAngleUpdate(getAngleFromRadians(t,this.angle.unit))}else this.onAngleUpdate(getAngleFromRadians(h,this.angle.unit))}onEditorMousedown(e){e.stopPropagation(),this.updateAngleFromMousePosition(e.pageX,e.pageY,e.shiftKey)}onEditorMousemove(e){1===e.buttons&&this.mousemoveThrottler.schedule((()=>(this.updateAngleFromMousePosition(e.pageX,e.pageY,e.shiftKey),Promise.resolve())))}onEditorWheel(e){if(!this.onAngleUpdate)return;const t=getNewAngleFromEvent(this.angle,e);t&&this.onAngleUpdate(t),e.preventDefault()}render(){const e={background:this.background},{translateX:t,translateY:o}=get2DTranslationsForAngle(this.angle,this.clockRadius/2),r={transform:`translate(${t}px, ${o}px) rotate(${this.angle.value}${this.angle.unit})`};render(html`
      <style>
        .clock,
        .pointer,
        .center,
        .hand,
        .dial {
          position: absolute;
        }

        .clock {
          top: 6px;
          width: 6em;
          height: 6em;
          background-color: var(--color-background);
          border: 0.5em solid var(--border-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          border-radius: 9em;
          box-shadow: var(--drop-shadow), inset 0 0 15px hsl(0deg 0% 0% / 25%); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          transform: translateX(-3em);
        }

        .center,
        .hand {
          box-shadow: 0 0 2px hsl(0deg 0% 0% / 20%); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .pointer {
          margin: auto;
          top: 0;
          left: -0.4em;
          right: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0.9em 0.9em 0.9em;
          border-color: transparent transparent var(--border-color) transparent; /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .center,
        .hand,
        .dial {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .center {
          width: 0.7em;
          height: 0.7em;
          border-radius: 10px;
        }

        .dial {
          width: 2px;
          height: var(--clock-dial-length);
          background-color: var(--dial-color); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          border-radius: 1px;
        }

        .hand {
          height: 50%;
          width: 0.3em;
          background: var(--accent-fg-color);
        }

        .hand::before {
          content: '';
          display: inline-block;
          position: absolute;
          top: -0.6em;
          left: -0.35em;
          width: 1em;
          height: 1em;
          border-radius: 1em;
          cursor: pointer;
          box-shadow: 0 0 5px hsl(0deg 0% 0% / 30%); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .hand::before,
        .center {
          background-color: var(--accent-fg-color);
        }

        :host-context(.-theme-with-dark-background) .hand::before {
          box-shadow: 0 0 5px hsl(0deg 0% 0% / 80%);
        }

        :host-context(.-theme-with-dark-background) .center,
        :host-context(.-theme-with-dark-background) .hand {
          box-shadow: 0 0 2px hsl(0deg 0% 0% / 60%);
        }

        :host-context(.-theme-with-dark-background) .clock {
          background-color: hsl(225deg 5% 27%);
        }
      </style>

      <div class="editor">
        <span class="pointer"></span>
        <div
          class="clock"
          style=${styleMap(e)}
          @mousedown=${this.onEditorMousedown}
          @mousemove=${this.onEditorMousemove}
          @wheel=${this.onEditorWheel}>
          ${this.renderDials()}
          <div class="hand" style=${styleMap(r)}></div>
          <span class="center"></span>
        </div>
      </div>
    `,this.shadow,{eventContext:this})}renderDials(){return this.dialTemplates||(this.dialTemplates=[0,45,90,135,180,225,270,315].map((e=>{const t=this.clockRadius-6-3,{translateX:o,translateY:r}=get2DTranslationsForAngle({value:e,unit:"deg"},t);return html`<span class="dial" style=${styleMap({transform:`translate(${o}px, ${r}px) rotate(${e}deg)`})}></span>`}))),this.dialTemplates}}customElements.get("devtools-css-angle-editor")||customElements.define("devtools-css-angle-editor",CSSAngleEditor);