import"../../../ui/legacy/legacy.js";import*as i18n from"../../../core/i18n/i18n.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as Input from"../../../ui/components/input/input.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Models from"../models/models.js";import createRecordingViewStyles from"./createRecordingView.css.js";const UIStrings={recordingName:"Recording name",startRecording:"Start recording",createRecording:"Create a new recording",recordingNameIsRequired:"Recording name is required",selectorAttribute:"Selector attribute",cancelRecording:"Cancel recording",selectorTypeCSS:"CSS",selectorTypePierce:"Pierce",selectorTypeARIA:"ARIA",selectorTypeText:"Text",selectorTypeXPath:"XPath",selectorTypes:"Selector types to record",includeNecessarySelectors:"You must choose CSS, Pierce, or XPath as one of your options. Only these selectors are guaranteed to be recorded since ARIA and text selectors may not be unique."},str_=i18n.i18n.registerUIStrings("panels/recorder/components/CreateRecordingView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class RecordingStartedEvent extends Event{static eventName="recordingstarted";name;selectorAttribute;selectorTypesToRecord;constructor(e,t,r){super(RecordingStartedEvent.eventName,{}),this.name=e,this.selectorAttribute=r||void 0,this.selectorTypesToRecord=t}}export class RecordingCancelledEvent extends Event{static eventName="recordingcancelled";constructor(){super(RecordingCancelledEvent.eventName)}}export class CreateRecordingView extends HTMLElement{static litTagName=LitHtml.literal`devtools-create-recording-view`;#e=this.attachShadow({mode:"open"});#t="";#r;#o;connectedCallback(){this.#e.adoptedStyleSheets=[createRecordingViewStyles,Input.textInputStyles,Input.checkboxStyles],this.#n(),this.#e.querySelector("input")?.focus()}set data(e){this.#o=e.recorderSettings,this.#t=this.#o.defaultTitle}#i(e){this.#r&&(this.#r=void 0,this.#n());"Enter"===e.key&&(this.startRecording(),e.stopPropagation(),e.preventDefault())}startRecording(){const e=this.#e.querySelector("#user-flow-name");if(!e)throw new Error("input#user-flow-name not found");if(!this.#o)throw new Error("settings not set");if(!e.value.trim())return this.#r=new Error(i18nString(UIStrings.recordingNameIsRequired)),void this.#n();const t=this.#e.querySelectorAll(".selector-type input[type=checkbox]"),r=[];for(const e of t){const t=e,o=t.value;t.checked&&r.push(o)}if(!r.includes(Models.Schema.SelectorType.CSS)&&!r.includes(Models.Schema.SelectorType.XPath)&&!r.includes(Models.Schema.SelectorType.Pierce))return this.#r=new Error(i18nString(UIStrings.includeNecessarySelectors)),void this.#n();for(const e of Object.values(Models.Schema.SelectorType))this.#o.setSelectorByType(e,r.includes(e));const o=this.#e.querySelector("#selector-attribute").value.trim();this.#o.selectorAttribute=o,this.dispatchEvent(new RecordingStartedEvent(e.value.trim(),r,o))}#s(){this.dispatchEvent(new RecordingCancelledEvent)}#c=()=>{this.#e.querySelector("#user-flow-name")?.select()};#n(){const e=new Map([[Models.Schema.SelectorType.ARIA,i18nString(UIStrings.selectorTypeARIA)],[Models.Schema.SelectorType.CSS,i18nString(UIStrings.selectorTypeCSS)],[Models.Schema.SelectorType.Text,i18nString(UIStrings.selectorTypeText)],[Models.Schema.SelectorType.XPath,i18nString(UIStrings.selectorTypeXPath)],[Models.Schema.SelectorType.Pierce,i18nString(UIStrings.selectorTypePierce)]]);LitHtml.render(LitHtml.html`
        <div class="wrapper">
          <div class="header-wrapper">
            <h1>${i18nString(UIStrings.createRecording)}</h1>
            <${Buttons.Button.Button.litTagName}
              title=${i18nString(UIStrings.cancelRecording)}
              .data=${{variant:"round",size:"SMALL",iconName:"cross"}}
              @click=${this.#s}
            ></${Buttons.Button.Button.litTagName}>
          </div>
          <label class="row-label" for="user-flow-name">${i18nString(UIStrings.recordingName)}</label>
          <input
            value=${this.#t}
            @focus=${this.#c}
            @keydown=${this.#i}
            class="devtools-text-input"
            id="user-flow-name"
          />
          <label class="row-label" for="selector-attribute">
            <span>${i18nString(UIStrings.selectorAttribute)}</span>
            <x-link class="link" href="https://g.co/devtools/recorder#selector">
              <${IconButton.Icon.Icon.litTagName}
                .data=${{iconName:"help",color:"var(--icon-default)",width:"16px",height:"16px"}}>
              </${IconButton.Icon.Icon.litTagName}>
            </x-link>
          </label>
          <input
            value=${this.#o?.selectorAttribute}
            placeholder="data-testid"
            @keydown=${this.#i}
            class="devtools-text-input"
            id="selector-attribute"
          />
          <label class="row-label">
            <span>${i18nString(UIStrings.selectorTypes)}</span>
            <x-link class="link" href="https://g.co/devtools/recorder#selector">
              <${IconButton.Icon.Icon.litTagName}
                .data=${{iconName:"help",color:"var(--icon-default)",width:"16px",height:"16px"}}
              ></${IconButton.Icon.Icon.litTagName}>
            </x-link>
          </label>
          <div class="checkbox-container">
            ${Object.values(Models.Schema.SelectorType).map((t=>{const r=this.#o?.getSelectorByType(t);return LitHtml.html`
                  <label class="checkbox-label selector-type">
                    <input
                      @keydown=${this.#i}
                      .value=${t}
                      checked=${LitHtml.Directives.ifDefined(r||void 0)}
                      type="checkbox"
                    />
                    ${e.get(t)||t}
                  </label>
                `}))}
          </div>

          ${this.#r&&LitHtml.html`
          <div class="error" role="alert">
            ${this.#r.message}
          </div>
        `}
        </div>
        <div class="footer">
          <div class="controls">
            <devtools-control-button
              @click=${this.startRecording}
              .label=${i18nString(UIStrings.startRecording)}
              .shape=${"circle"}
              title=${Models.Tooltip.getTooltipForActions(i18nString(UIStrings.startRecording),"chrome_recorder.start-recording")}
            ></devtools-control-button>
          </div>
        </div>
      `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-create-recording-view",CreateRecordingView);