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 LitHtml from"../../../ui/lit-html/lit-html.js";import*as Models from"../models/models.js";import recordingListViewStyles from"./recordingListView.css.js";const UIStrings={savedRecordings:"Saved recordings",createRecording:"Create a new recording",playRecording:"Play recording",deleteRecording:"Delete recording",openRecording:"Open recording"},str_=i18n.i18n.registerUIStrings("panels/recorder/components/RecordingListView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class CreateRecordingEvent extends Event{static eventName="createrecording";constructor(){super(CreateRecordingEvent.eventName)}}export class DeleteRecordingEvent extends Event{storageName;static eventName="deleterecording";constructor(e){super(DeleteRecordingEvent.eventName),this.storageName=e}}export class OpenRecordingEvent extends Event{storageName;static eventName="openrecording";constructor(e){super(OpenRecordingEvent.eventName),this.storageName=e}}export class PlayRecordingEvent extends Event{storageName;static eventName="playrecording";constructor(e){super(PlayRecordingEvent.eventName),this.storageName=e}}export class RecordingListView extends HTMLElement{static litTagName=LitHtml.literal`devtools-recording-list-view`;#e=this.attachShadow({mode:"open"});#t={recordings:[],replayAllowed:!0};connectedCallback(){this.#e.adoptedStyleSheets=[recordingListViewStyles],ComponentHelpers.ScheduledRender.scheduleRender(this,this.#n)}set recordings(e){this.#t.recordings=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#n)}set replayAllowed(e){this.#t.replayAllowed=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#n)}#o(){this.dispatchEvent(new CreateRecordingEvent)}#i(e,t){t.stopPropagation(),this.dispatchEvent(new DeleteRecordingEvent(e))}#r(e,t){t.stopPropagation(),this.dispatchEvent(new OpenRecordingEvent(e))}#s(e,t){t.stopPropagation(),this.dispatchEvent(new PlayRecordingEvent(e))}#a(e,t){"Enter"===t.key&&this.#r(e,t)}#d(e){e.stopPropagation()}#n=()=>{LitHtml.render(LitHtml.html`
        <div class="wrapper">
          <div class="header">
            <h1>${i18nString(UIStrings.savedRecordings)}</h1>
            <${Buttons.Button.Button.litTagName}
              .variant=${"primary"}
              @click=${this.#o}
              title=${Models.Tooltip.getTooltipForActions(i18nString(UIStrings.createRecording),"chrome_recorder.create-recording")}
            >
              ${i18nString(UIStrings.createRecording)}
            </${Buttons.Button.Button.litTagName}>
          </div>
          <div class="table">
            ${this.#t.recordings.map((e=>LitHtml.html`
                  <div role="button" tabindex="0" aria-label=${i18nString(UIStrings.openRecording)} class="row" @keydown=${this.#a.bind(this,e.storageName)} @click=${this.#r.bind(this,e.storageName)}>
                    <div class="icon">
                      <${IconButton.Icon.Icon.litTagName} .data=${{iconName:"flow",color:"var( --sys-color-primary)"}}>
                      </${IconButton.Icon.Icon.litTagName}>
                    </div>
                    <div class="title">${e.name}</div>
                    <div class="actions">
                      ${this.#t.replayAllowed?LitHtml.html`
                              <${Buttons.Button.Button.litTagName}
                                title=${i18nString(UIStrings.playRecording)}
                                .data=${{variant:"round",iconName:"play"}}
                                @click=${this.#s.bind(this,e.storageName)}
                                @keydown=${this.#d}
                              ></${Buttons.Button.Button.litTagName}>
                              <div class="divider"></div>`:""}
                      <${Buttons.Button.Button.litTagName}
                        class="delete-recording-button"
                        title=${i18nString(UIStrings.deleteRecording)}
                        .data=${{variant:"round",iconName:"bin"}}
                        @click=${this.#i.bind(this,e.storageName)}
                        @keydown=${this.#d}
                      ></${Buttons.Button.Button.litTagName}>
                    </div>
                  </div>
                `))}
          </div>
        </div>
      `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-recording-list-view",RecordingListView);