import*as i18n from"../i18n/i18n.js";import*as UI from"../ui/ui.js";import{Events,Presets,RuntimeSettings}from"./LighthouseController.js";import{RadioSetting}from"./RadioSetting.js";const UIStrings={learnMore:"Learn more",device:"Device",categories:"Categories",communityPluginsBeta:"Community Plugins (beta)",generateReport:"Generate report",identifyAndFixCommonProblemsThat:"Identify and fix common problems that affect your site's performance, accessibility, and user experience."},str_=i18n.i18n.registerUIStrings("lighthouse/LighthouseStartView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class StartView extends UI.Widget.Widget{constructor(t){super(),this.registerRequiredCSS("lighthouse/lighthouseStartView.css",{enableLegacyPatching:!1}),this._controller=t,this._settingsToolbar=new UI.Toolbar.Toolbar(""),this._render()}settingsToolbar(){return this._settingsToolbar}_populateRuntimeSettingAsRadio(t,e,i){const s=RuntimeSettings.find((e=>e.setting.name===t));if(!s||!s.options)throw new Error(`${t} is not a setting with options`);const n=new RadioSetting(s.options,s.setting,s.description);i.appendChild(n.element),UI.ARIAUtils.setAccessibleName(n.element,e)}_populateRuntimeSettingAsToolbarCheckbox(t,e){const i=RuntimeSettings.find((e=>e.setting.name===t));if(!i||!i.title)throw new Error(`${t} is not a setting with a title`);i.setting.setTitle(i.title);const s=new UI.Toolbar.ToolbarSettingCheckbox(i.setting,i.description);if(e.appendToolbarItem(s),i.learnMore){const t=UI.XLink.XLink.create(i.learnMore,i18nString(UIStrings.learnMore),"lighthouse-learn-more");t.style.padding="5px",s.element.appendChild(t)}}_populateFormControls(t){const e=t.$("device-type-form-elements");this._populateRuntimeSettingAsRadio("lighthouse.device_type",i18nString(UIStrings.device),e);const i=t.$("categories-form-elements"),s=t.$("plugins-form-elements");for(const n of Presets){const t=n.plugin?s:i;n.setting.setTitle(n.title);const e=new UI.Toolbar.ToolbarSettingCheckbox(n.setting,n.description);t.createChild("div","vbox lighthouse-launcher-row").appendChild(e.element)}UI.ARIAUtils.markAsGroup(i),UI.ARIAUtils.setAccessibleName(i,i18nString(UIStrings.categories)),UI.ARIAUtils.markAsGroup(s),UI.ARIAUtils.setAccessibleName(s,i18nString(UIStrings.communityPluginsBeta))}_render(){this._populateRuntimeSettingAsToolbarCheckbox("lighthouse.clear_storage",this._settingsToolbar),this._populateRuntimeSettingAsToolbarCheckbox("lighthouse.throttling",this._settingsToolbar),this._startButton=UI.UIUtils.createTextButton(i18nString(UIStrings.generateReport),(()=>this._controller.dispatchEventToListeners(Events.RequestLighthouseStart,this._startButton.matches(":focus-visible"))),"",!0),this.setDefaultFocusedElement(this._startButton);const t=i18nString(UIStrings.identifyAndFixCommonProblemsThat),e=UI.Fragment.Fragment.build`
  <div class="vbox lighthouse-start-view">
  <header>
  <div class="lighthouse-logo"></div>
  <div class="lighthouse-start-button-container hbox">
  ${this._startButton}
  </div>
  <div $="help-text" class="lighthouse-help-text hidden"></div>
  <div class="lighthouse-start-view-text">
  <span>${t}</span>
  ${UI.XLink.XLink.create("https://developers.google.com/web/tools/lighthouse/",i18nString(UIStrings.learnMore))}
  </div>
  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
  </header>
  <form>
  <div class="lighthouse-form-categories">
  <div class="lighthouse-form-section">
  <div class="lighthouse-form-section-label">
  ${i18nString(UIStrings.categories)}
  </div>
  <div class="lighthouse-form-elements" $="categories-form-elements"></div>
  </div>
  <div class="lighthouse-form-section">
  <div class="lighthouse-form-section-label">
  <div class="lighthouse-icon-label">${i18nString(UIStrings.communityPluginsBeta)}</div>
  </div>
  <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
  </div>
  </div>
  <div class="lighthouse-form-section">
  <div class="lighthouse-form-section-label">
  ${i18nString(UIStrings.device)}
  </div>
  <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
  </div>
  </form>
  </div>
  `;this._helpText=e.$("help-text"),this._warningText=e.$("warning-text"),this._populateFormControls(e),this.contentElement.appendChild(e.element()),this.contentElement.style.overflow="auto"}onResize(){const t=this.contentElement.offsetWidth<560,e=this.contentElement.querySelector(".lighthouse-start-view");e&&(e.classList.toggle("hbox",!t),e.classList.toggle("vbox",t))}focusStartButton(){this._startButton.focus()}setStartButtonEnabled(t){this._helpText&&this._helpText.classList.toggle("hidden",t),this._startButton&&(this._startButton.disabled=!t)}setUnauditableExplanation(t){this._helpText&&(this._helpText.textContent=t)}setWarningText(t){this._warningText&&(this._warningText.textContent=t,this._warningText.classList.toggle("hidden",!t),this._shouldConfirm=Boolean(t))}}