import*as Common from"../../common/common.js";import*as LitHtml from"../../third_party/lit-html/lit-html.js";import*as i18n from"../../i18n/i18n.js";const UIStrings={openingSurvey:"Opening survey \u2026",thankYouForYourFeedback:"Thank you for your feedback",anErrorOccurredWithTheSurvey:"An error occurred with the survey"},str_=i18n.i18n.registerUIStrings("ui/components/SurveyLink.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class SurveyLink extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.trigger="",this.promptText=Common.UIString.LocalizedEmptyString,this.canShowSurvey=()=>{},this.showSurvey=()=>{},this.state="Checking"}set data(t){this.trigger=t.trigger,this.promptText=t.promptText,this.canShowSurvey=t.canShowSurvey,this.showSurvey=t.showSurvey,this.checkSurvey()}checkSurvey(){this.state="Checking",this.canShowSurvey(this.trigger,(({canShowSurvey:t})=>{this.state=t?"ShowLink":"DontShowLink",this.render()}))}sendSurvey(){this.state="Sending",this.render(),this.showSurvey(this.trigger,(({surveyShown:t})=>{this.state=t?"SurveyShown":"Failed",this.render()}))}render(){if("Checking"===this.state||"DontShowLink"===this.state)return;let t=this.promptText;"Sending"===this.state?t=i18nString(UIStrings.openingSurvey):"SurveyShown"===this.state?t=i18nString(UIStrings.thankYouForYourFeedback):"Failed"===this.state&&(t=i18nString(UIStrings.anErrorOccurredWithTheSurvey));let e="";"Sending"===this.state?e="pending-link":"Failed"!==this.state&&"SurveyShown"!==this.state||(e="disabled-link");const i="ShowLink"!==this.state,n=LitHtml.html`
      <style>
        .link-icon {
          vertical-align: sub;
          margin-right: 0.5ch;
        }

        .link {
          padding: var(--issue-link-padding, 4px 0 0 0);
          text-decoration: var(--issue-link-text-decoration, underline);
          cursor: pointer;
          font-size: var(--issue-link-font-size, 14px);
          color: var(--issue-link); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
          border: none;
          background: none;
          font-family: inherit;
        }

        .link:focus:not(:focus-visible) {
          outline: none;
        }

        .pending-link {
          opacity: 75%;
          pointer-events: none;
          cursor: default;
          text-decoration: none;
        }

        .disabled-link {
          pointer-events: none;
          cursor: default;
          text-decoration: none;
        }
      </style>
      <button class="link ${e}" tabindex=${i?"-1":"0"} .disabled=${i} aria-disabled=${i} @click=${this.sendSurvey}>
        <devtools-icon class="link-icon" .data=${{iconName:"feedback_thin_16x16_icon",color:"var(--issue-link)",width:"var(--issue-link-icon-size, 16px)",height:"var(--issue-link-icon-size, 16px)"}}></devtools-icon><!--
      -->${t}
      </button>
    `;LitHtml.render(n,this.shadow,{eventContext:this})}}customElements.define("devtools-survey-link",SurveyLink);