import{LitElement as t,html as e,css as i}from"../../../lit/index.js";import{DDDSuper as o}from"../../d-d-d/d-d-d.js";import"../../simple-icon/lib/simple-icon-lite.js";import"../../simple-icon/lib/simple-icon-button-lite.js";export class SortingOption extends(o(t)){static get tag(){return"sorting-option"}static get properties(){return{...super.properties,disabled:{type:Boolean,reflect:!0},dragging:{type:Boolean,reflect:!0},correct:{type:Boolean,reflect:!0},incorrect:{type:Boolean,reflect:!0}}}updated(t){super.updated&&super.updated(t),t.has("disabled")&&(this.disabled?this.removeAttribute("draggable"):this.setAttribute("draggable",!0))}constructor(){super(),this.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},this.dragging=!1,this.disabled=!1,this.addEventListener("mousedown",this.getCurrentPosition),this.addEventListener("drag",this.dragStart),this.addEventListener("dragend",this.dragEnd),this.addEventListener("mouseup",this.dragEnd)}getCurrentPosition(t){if(!this.disabled){this.correct=null,this.incorrect=null;var e=t.clientY;this.currentPosition=e}}dragStart(t){globalThis.document&&globalThis.document.startViewTransition?globalThis.document.startViewTransition((()=>{this.dragStartCallback(t)})):this.dragStartCallback(t)}dragStartCallback(t){if(!this.disabled){this.dragging=!0;var e=64;this.querySelectorAll("img").length>0&&(e=92);var i=t.clientY;0!=i&&i>0&&(this.dragPosition=i);var o=this,r=this.parentNode;if(this.dragPosition+e<this.currentPosition){for(var d=0;d<r.children.length;d++)r.children[d].isEqualNode(o)&&(n=d);if(0!=n)return r.insertBefore(o,r.children[n-1]),void(this.currentPosition=this.dragPosition)}if(this.dragPosition-e>this.currentPosition){var n;for(d=0;d<r.children.length;d++)r.children[d].isEqualNode(o)&&(n=d);if(n!=r.children.length-1)return r.insertBefore(r.children[n+1],o),void(this.currentPosition=this.dragPosition)}}}dragEnd(){this.disabled||(this.dragging=!1)}arrowSort(t){const e=t.target;globalThis.document&&globalThis.document.startViewTransition?globalThis.document.startViewTransition((()=>{this.arrowSortCallback(e)})):this.arrowSortCallback(e)}arrowSortCallback(t){if(!this.disabled){let e=this.parentNode;if("downArrow"===t.getAttribute("id")){if(this.nextElementSibling&&"SORTING-OPTION"===this.nextElementSibling.tagName){e.insertBefore(this.nextElementSibling,this).shadowRoot.querySelector("#downArrow").focus()}}else if(this.previousElementSibling&&"SORTING-OPTION"===this.previousElementSibling.tagName){e.insertBefore(this,this.previousElementSibling).shadowRoot.querySelector("#upArrow").shadowRoot.querySelector("button").focus()}this.style.backgroundColor="var(--ddd-theme-default-linkLight)",setTimeout((()=>{this.style.backgroundColor=""}),500)}}static get styles(){return[super.styles,i`
        :host {
          view-transition-name: sort-option;
          padding: var(--ddd-spacing-4);
          min-height: var(--ddd-spacing-8);
          margin: var(--ddd-spacing-4);
          height: 100%;
          display: flex;
          align-items: center;
          z-index: 1;
          overflow: hidden;
          transition: all 0.3s ease-in-out 0s;
          border: var(--ddd-border-lg);
          border-radius: var(--ddd-radius-xs);
          background-color: var(
            --ddd-theme-accent,
            var(--simple-colors-default-theme-accent-3)
          );
          color: var(--simple-colors-default-theme-accent-12);
          font-family: var(--ddd-font-navigation);
          font-size: var(--ddd-font-size-xs);
          line-height: var(--ddd-font-size-xs);
          --simple-icon-height: var(--ddd-icon-xs);
          --simple-icon-width: var(--ddd-icon-xs);
        }
        button[disabled]:not([correct]):not([incorrect]) {
          opacity: 0.7;
        }
        :host(:not([disabled])) {
          cursor: grab;
        }

        :host([correct]) {
          border: 4px solid var(--ddd-theme-default-opportunityGreen);
          color: black;
        }

        :host([incorrect]) {
          border: 4px dotted var(--ddd-theme-default-wonderPurple);
          color: black;
        }

        .icon {
          display: block;
          height: 32px;
          width: 32px;
        }

        :host([correct]) .icon {
          color: var(--ddd-theme-default-opportunityGreen);
        }
        :host([incorrect]) .icon {
          color: var(--ddd-theme-default-wonderPurple);
        }
        .option-slot-wrapper {
          display: flex;
          align-items: center;
          z-index: 2;
          width: 100%;
          background-color: transparent;
          border: none;
          text-align: inherit;
          font-weight: bold;
        }
        div ::slotted(*) {
          height: 64px;
          min-width: 113px;
          pointer-events: none;
        }
        .arrow-container {
          display: flex;
          justify-content: flex-end;
          padding-right: var(--ddd-spacing-2);
          position: relative;
          right: 0px;
          background-color: transparent;
          align-items: center;
        }

        .feedback-container {
          width: 32px;
          height: 32px;
          display: flex;
          margin-right: var(--ddd-spacing-4);
          background-color: transparent;
        }

        :host([dragging]) {
          background-color: var(--ddd-theme-default-infoLight);
        }
        :host(:focus-within:not([disabled])),
        :host(:hover:not([disabled])) {
          background-color: var(
            --ddd-theme-accent,
            var(--simple-colors-default-theme-accent-3)
          );
          color: var(--simple-colors-default-theme-accent-12);
          box-shadow: var(--ddd-boxShadow-sm);
          border-color: black;
        }

        simple-icon-button-lite {
          margin: var(--ddd-spacing-1);
          border-radius: var(--ddd-radius-xs);
          border: var(--ddd-border-sm);
        }
        simple-icon-button-lite::part(button) {
          border: none;
          border-radius: var(--ddd-radius-xs);
          outline-offset: 2px;
        }

        :host(:not([disabled])) simple-icon-button-lite {
          background-color: var(
            --ddd-theme-primary,
            var(--ddd-theme-default-link)
          );
          color: var(
            --lowContrast-override,
            var(--ddd-theme-bgContrast, white)
          );
        }
        :host(:hover:not([disabled])) simple-icon-button-lite {
          border-color: black;
        }
        :host(:not([disabled])) simple-icon-button-lite:hover,
        :host(:not([disabled])) simple-icon-button-lite:focus,
        :host(:not([disabled])) simple-icon-button-lite:focus-within {
          background-color: light-dark(
            var(--ddd-theme-default-info),
            var(--ddd-theme-default-infoLight)
          );
          color: light-dark(white, black);

          border-color: black;
        }
      `]}render(){return e`
      <div class="feedback-container">
        ${this.correct||this.incorrect?e`<simple-icon-lite
              class="icon"
              icon="${this.correct?"check":"clear"}"
              title="Answer is in ${this.correct?"correct":"incorrect"} order"
            ></simple-icon-lite>`:e`<div class="icon"></div>`}
      </div>
      <div class="option-slot-wrapper"><slot></slot></div>
      <div class="arrow-container">
        <simple-icon-button-lite
          id="upArrow"
          ?disabled="${this.disabled}"
          icon="arrow-upward"
          @click="${this.arrowSort}"
          title="Select to move option up in order"
        ></simple-icon-button-lite>
        <simple-icon-button-lite
          id="downArrow"
          ?disabled="${this.disabled}"
          icon="arrow-downward"
          @click="${this.arrowSort}"
          title="Select to move option down in order"
        ></simple-icon-button-lite>
      </div>
    `}}globalThis.customElements.define(SortingOption.tag,SortingOption);