/**
 * @license
 * Copyright (C) 2020 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

export const htmlTemplate = html`
  <style include="shared-styles">
    :host {
      display: block;
      font-family: var(--font-family);
      padding: var(--spacing-m);
    }
    :host([disabled]) {
      pointer-events: none;
    }
    :host([disabled]) .actions,
    :host([disabled]) .robotActions,
    :host([disabled]) .date {
      opacity: 0.5;
    }
    :host([discarding]) {
      display: none;
    }
    .header {
      align-items: center;
      cursor: pointer;
      display: flex;
      margin: calc(0px - var(--spacing-m)) calc(0px - var(--spacing-m)) 0
        calc(0px - var(--spacing-m));
      padding: var(--spacing-m);
    }
    .headerLeft > span {
      font-weight: var(--font-weight-bold);
    }
    .container.collapsed .header {
      margin-bottom: calc(0 - var(--spacing-m));
    }
    .headerMiddle {
      color: var(--deemphasized-text-color);
      flex: 1;
      overflow: hidden;
    }
    .draftLabel,
    .draftTooltip {
      color: var(--deemphasized-text-color);
      display: none;
    }
    .date {
      justify-content: flex-end;
      margin-left: 5px;
      min-width: 4.5em;
      text-align: right;
      white-space: nowrap;
    }
    span.date {
      color: var(--deemphasized-text-color);
    }
    span.date:hover {
      text-decoration: underline;
    }
    .actions,
    .robotActions {
      display: flex;
      justify-content: flex-end;
      padding-top: 0;
    }
    .action {
      margin-left: var(--spacing-l);
    }
    .rightActions {
      display: flex;
      justify-content: flex-end;
    }
    .rightActions gr-button {
      --gr-button: {
        height: 20px;
        padding: 0 var(--spacing-s);
      }
    }
    .editMessage {
      display: none;
      margin: var(--spacing-m) 0;
      width: 100%;
    }
    .container:not(.draft) .actions .hideOnPublished {
      display: none;
    }
    .draft .reply,
    .draft .quote,
    .draft .ack,
    .draft .done {
      display: none;
    }
    .draft .draftLabel,
    .draft .draftTooltip {
      display: inline;
    }
    .draft:not(.editing) .save,
    .draft:not(.editing) .cancel {
      display: none;
    }
    .editing .message,
    .editing .reply,
    .editing .quote,
    .editing .ack,
    .editing .done,
    .editing .edit,
    .editing .discard,
    .editing .unresolved {
      display: none;
    }
    .editing .editMessage {
      display: block;
    }
    .show-hide {
      margin-left: var(--spacing-s);
    }
    .robotId {
      color: var(--deemphasized-text-color);
      margin-bottom: var(--spacing-m);
      margin-top: -0.4em;
    }
    .robotIcon {
      margin-right: var(--spacing-xs);
      /* because of the antenna of the robot, it looks off center even when it
         is centered. artificially adjust margin to account for this. */
      margin-top: -4px;
    }
    .runIdInformation {
      margin: var(--spacing-m) 0;
    }
    .robotRun {
      margin-left: var(--spacing-m);
    }
    .robotRunLink {
      margin-left: var(--spacing-m);
    }
    input.show-hide {
      display: none;
    }
    label.show-hide {
      cursor: pointer;
      display: block;
    }
    label.show-hide iron-icon {
      vertical-align: top;
    }
    #container .collapsedContent {
      display: none;
    }
    #container.collapsed {
      padding-bottom: 3px;
    }
    #container.collapsed .collapsedContent {
      display: block;
      overflow: hidden;
      padding-left: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #container.collapsed .actions,
    #container.collapsed gr-formatted-text,
    #container.collapsed gr-textarea,
    #container.collapsed .respectfulReviewTip {
      display: none;
    }
    .resolve,
    .unresolved {
      align-items: center;
      display: flex;
      flex: 1;
      margin: 0;
    }
    .resolve label {
      color: var(--comment-text-color);
    }
    gr-dialog .main {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .comment-extra-note {
      color: var(--deemphasized-text-color);
      border: 1px solid var(--deemphasized-text-color);
      border-radius: var(--border-radius);
      padding: 0px var(--spacing-s);
    }
    #deleteBtn {
      display: none;
      --gr-button: {
        color: var(--deemphasized-text-color);
        padding: 0;
      }
    }
    #deleteBtn.showDeleteButtons {
      display: block;
    }

    /** Disable select for the caret and actions */
    .actions,
    .show-hide {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .respectfulReviewTip {
      justify-content: space-between;
      display: flex;
      padding: var(--spacing-m);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      margin-bottom: var(--spacing-m);
    }
    .respectfulReviewTip div {
      display: flex;
    }
    .respectfulReviewTip div iron-icon {
      margin-right: var(--spacing-s);
    }
    .respectfulReviewTip a {
      white-space: nowrap;
      margin-right: var(--spacing-s);
      padding-left: var(--spacing-m);
      text-decoration: none;
    }
    .pointer {
      cursor: pointer;
    }
  </style>
  <div id="container" class="container">
    <div class="header" id="header" on-click="_handleToggleCollapsed">
      <div class="headerLeft">
        <span class="authorName">
          [[_computeAuthorName(comment, _serverConfig)]]
        </span>
        <span class="draftLabel">DRAFT</span>
        <gr-tooltip-content
          class="draftTooltip"
          has-tooltip=""
          title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'A' key."
          max-width="20em"
          show-icon=""
        ></gr-tooltip-content>
      </div>
      <div class="headerMiddle">
        <span class="collapsedContent">[[comment.message]]</span>
      </div>
      <div
        hidden$="[[_computeHideRunDetails(comment, collapsed)]]"
        class="runIdMessage message"
      >
        <div class="runIdInformation">
          <a class="robotRunLink" href$="[[comment.url]]">
            <span class="robotRun link">Run Details</span>
          </a>
        </div>
      </div>
      <template is="dom-if" if="[[comment.extraNote]]">
        <span class="comment-extra-note">[[comment.extraNote]]</span>
      </template>
      <gr-button
        id="deleteBtn"
        link=""
        class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]"
        hidden$="[[isRobotComment]]"
        on-click="_handleCommentDelete"
      >
        <iron-icon id="icon" icon="gr-icons:delete"></iron-icon>
      </gr-button>
      <span class="date" on-click="_handleAnchorClick">
        <gr-date-formatter
          has-tooltip=""
          date-str="[[comment.updated]]"
        ></gr-date-formatter>
      </span>
      <div class="show-hide">
        <label class="show-hide">
          <input
            type="checkbox"
            class="show-hide"
            checked$="[[collapsed]]"
            on-change="_handleToggleCollapsed"
          />
          <iron-icon id="icon" icon="[[_computeShowHideIcon(collapsed)]]">
          </iron-icon>
        </label>
      </div>
    </div>
    <div class="body">
      <template is="dom-if" if="[[isRobotComment]]">
        <div class="robotId" hidden$="[[collapsed]]">
          [[comment.author.name]]
        </div>
      </template>
      <template is="dom-if" if="[[editing]]">
        <gr-textarea
          id="editTextarea"
          class="editMessage"
          autocomplete="on"
          code=""
          disabled="{{disabled}}"
          rows="4"
          text="{{_messageText}}"
        ></gr-textarea>
        <template
          is="dom-if"
          if="[[_computeVisibilityOfTip(_showRespectfulTip, _respectfulTipDismissed)]]"
        >
          <div class="respectfulReviewTip">
            <div>
              <gr-tooltip-content
                has-tooltip=""
                title="Tips for respectful code reviews."
              >
                <iron-icon
                  class="pointer"
                  icon="gr-icons:lightbulb-outline"
                ></iron-icon>
              </gr-tooltip-content>
              [[_respectfulReviewTip]]
            </div>
            <div>
              <a
                tabindex="-1"
                on-click="_onRespectfulReadMoreClick"
                href="https://testing.googleblog.com/2019/11/code-health-respectful-reviews-useful.html"
                target="_blank"
              >
                Read more
              </a>
              <a
                tabindex="-1"
                class="close pointer"
                on-click="_dismissRespectfulTip"
                >Not helpful</a
              >
            </div>
          </div>
        </template>
      </template>
      <!--The message class is needed to ensure selectability from
        gr-diff-selection.-->
      <gr-formatted-text
        class="message"
        content="[[comment.message]]"
        no-trailing-margin="[[!comment.__draft]]"
        config="[[projectConfig.commentlinks]]"
      ></gr-formatted-text>
      <div class="actions humanActions" hidden$="[[!_showHumanActions]]">
        <div class="action resolve hideOnPublished">
          <label>
            <input
              type="checkbox"
              id="resolvedCheckbox"
              checked="[[resolved]]"
              on-change="_handleToggleResolved"
            />
            Resolved
          </label>
        </div>
        <div class="rightActions">
          <gr-button
            link=""
            class="action cancel hideOnPublished"
            on-click="_handleCancel"
            >Cancel</gr-button
          >
          <gr-button
            link=""
            class="action discard hideOnPublished"
            on-click="_handleDiscard"
            >Discard</gr-button
          >
          <gr-button
            link=""
            class="action edit hideOnPublished"
            on-click="_handleEdit"
            >Edit</gr-button
          >
          <gr-button
            link=""
            disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]"
            class="action save hideOnPublished"
            on-click="_handleSave"
            >Save</gr-button
          >
        </div>
      </div>
      <div class="robotActions" hidden$="[[!_showRobotActions]]">
        <template is="dom-if" if="[[isRobotComment]]">
          <gr-endpoint-decorator name="robot-comment-controls">
            <gr-endpoint-param name="comment" value="[[comment]]">
            </gr-endpoint-param>
          </gr-endpoint-decorator>
          <gr-button
            link=""
            secondary=""
            class="action show-fix"
            hidden$="[[_hasNoFix(comment)]]"
            on-click="_handleShowFix"
          >
            Show Fix
          </gr-button>
          <template is="dom-if" if="[[!_hasHumanReply]]">
            <gr-button
              link=""
              class="action fix"
              on-click="_handleFix"
              disabled="[[robotButtonDisabled]]"
            >
              Please Fix
            </gr-button>
          </template>
        </template>
      </div>
    </div>
  </div>
  <template is="dom-if" if="[[_enableOverlay]]">
    <gr-overlay id="confirmDeleteOverlay" with-backdrop="">
      <gr-confirm-delete-comment-dialog
        id="confirmDeleteComment"
        on-confirm="_handleConfirmDeleteComment"
        on-cancel="_handleCancelDeleteComment"
      >
      </gr-confirm-delete-comment-dialog>
    </gr-overlay>
    <gr-overlay id="confirmDiscardOverlay" with-backdrop="">
      <gr-dialog
        id="confirmDiscardDialog"
        confirm-label="Discard"
        confirm-on-enter=""
        on-confirm="_handleConfirmDiscard"
        on-cancel="_closeConfirmDiscardOverlay"
      >
        <div class="header" slot="header">
          Discard comment
        </div>
        <div class="main" slot="main">
          Are you sure you want to discard this draft comment?
        </div>
      </gr-dialog>
    </gr-overlay>
  </template>
  <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
  <gr-storage id="storage"></gr-storage>
  <gr-reporting id="reporting"></gr-reporting>
`;