/**
 * @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';

export const htmlTemplate = html`
  <style>
    :host {
      display: block;
      position: relative;
      cursor: pointer;
      overflow-y: hidden;
    }
    :host(.expanded) {
      cursor: auto;
    }
    .collapsed .contentContainer {
      align-items: center;
      color: var(--deemphasized-text-color);
      display: flex;
      white-space: nowrap;
    }
    .contentContainer {
      padding: var(--spacing-m) var(--spacing-l);
    }
    .expanded .contentContainer {
      background-color: var(--background-color-secondary);
    }
    .collapsed .contentContainer {
      background-color: var(--background-color-primary);
    }
    div.serviceUser.expanded div.contentContainer {
      background-color: var(
        --background-color-service-user,
        var(--background-color-secondary)
      );
    }
    div.serviceUser.collapsed div.contentContainer {
      background-color: var(
        --background-color-service-user,
        var(--background-color-primary)
      );
    }
    .name {
      font-weight: var(--font-weight-bold);
    }
    .message {
      --gr-formatted-text-prose-max-width: 120ch;
    }
    .collapsed .message {
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .collapsed .author,
    .collapsed .content,
    .collapsed .message,
    .collapsed .updateCategory,
    gr-account-chip {
      display: inline;
    }
    gr-button {
      margin: 0 -4px;
    }
    .collapsed gr-thread-list,
    .collapsed .replyBtn,
    .collapsed .deleteBtn,
    .collapsed .hideOnCollapsed,
    .hideOnOpen {
      display: none;
    }
    .replyBtn {
      margin-right: var(--spacing-m);
    }
    .collapsed .hideOnOpen {
      display: block;
    }
    .collapsed .content {
      flex: 1;
      margin-right: var(--spacing-m);
      min-width: 0;
      overflow: hidden;
    }
    .collapsed .content.messageContent {
      text-overflow: ellipsis;
    }
    .collapsed .dateContainer {
      position: static;
    }
    .collapsed .author {
      overflow: hidden;
      color: var(--primary-text-color);
      margin-right: var(--spacing-s);
    }
    .authorLabel {
      min-width: 130px;
      --account-max-length: 120px;
      margin-right: var(--spacing-s);
    }
    .expanded .author {
      cursor: pointer;
      margin-bottom: var(--spacing-m);
    }
    .expanded .content {
      padding-left: 40px;
    }
    .dateContainer {
      position: absolute;
      /* right and top values should match .contentContainer padding */
      right: var(--spacing-l);
      top: var(--spacing-m);
    }
    .dateContainer gr-button {
      margin-right: var(--spacing-m);
      color: var(--deemphasized-text-color);
    }
    .dateContainer .patchset:before {
      content: 'Patchset ';
    }
    .dateContainer .patchsetDiffButton {
      margin-right: var(--spacing-m);
      --gr-button-padding: 0 var(--spacing-m);
    }
    span.date {
      color: var(--deemphasized-text-color);
    }
    span.date:hover {
      text-decoration: underline;
    }
    .dateContainer iron-icon {
      cursor: pointer;
      vertical-align: top;
    }
    .score {
      box-sizing: border-box;
      border-radius: var(--border-radius);
      color: var(--vote-text-color);
      display: inline-block;
      padding: 0 var(--spacing-s);
      text-align: center;
    }
    .score,
    .commentsSummary {
      margin-right: var(--spacing-s);
      min-width: 115px;
    }
    .expanded .commentsSummary {
      display: none;
    }
    .commentsIcon {
      vertical-align: top;
    }
    .score.removed {
      background-color: var(--vote-color-neutral);
    }
    .score.negative {
      background-color: var(--vote-color-disliked);
      border: 1px solid var(--vote-outline-disliked);
      line-height: calc(var(--line-height-normal) - 2px);
      color: var(--chip-color);
    }
    .score.negative.min {
      background-color: var(--vote-color-rejected);
      border: none;
      padding-top: 1px;
      padding-bottom: 1px;
      color: var(--vote-text-color);
    }
    .score.positive {
      background-color: var(--vote-color-recommended);
      border: 1px solid var(--vote-outline-recommended);
      line-height: calc(var(--line-height-normal) - 2px);
      color: var(--chip-color);
    }
    .score.positive.max {
      background-color: var(--vote-color-approved);
      border: none;
      padding-top: 1px;
      padding-bottom: 1px;
      color: var(--vote-text-color);
    }
    gr-account-label::part(gr-account-label-text) {
      font-weight: var(--font-weight-bold);
    }
    iron-icon {
      --iron-icon-height: 20px;
      --iron-icon-width: 20px;
    }
    @media screen and (max-width: 50em) {
      .expanded .content {
        padding-left: 0;
      }
      .score,
      .commentsSummary {
        min-width: 0px;
      }
      .authorLabel {
        width: 100px;
      }
      .dateContainer .patchset:before {
        content: 'PS ';
      }
    }
  </style>
  <div class$="[[_computeClass(_expanded, author)]]">
    <div class="contentContainer">
      <div class="author" on-click="_handleAuthorClick">
        <span hidden$="[[!showOnBehalfOf]]">
          <span class="name">[[message.real_author.name]]</span>
          on behalf of
        </span>
        <gr-account-label
          account="[[author]]"
          class="authorLabel"
        ></gr-account-label>
        <template
          is="dom-repeat"
          items="[[_getScores(message, labelExtremes)]]"
          as="score"
        >
          <span class$="score [[_computeScoreClass(score, labelExtremes)]]">
            [[score.label]] [[score.value]]
          </span>
        </template>
      </div>
      <template is="dom-if" if="[[_commentCountText]]">
        <div class="commentsSummary">
          <iron-icon icon="gr-icons:comment" class="commentsIcon"></iron-icon>
          <span class="numberOfComments">[[_commentCountText]]</span>
        </div>
      </template>
      <template is="dom-if" if="[[message.message]]">
        <div class="content messageContent">
          <div class="message hideOnOpen">[[_messageContentCollapsed]]</div>
          <template is="dom-if" if="[[_expanded]]">
            <gr-formatted-text
              noTrailingMargin
              class="message hideOnCollapsed"
              content="[[_messageContentExpanded]]"
              config="[[_projectConfig.commentlinks]]"
            ></gr-formatted-text>
            <template is="dom-if" if="[[_messageContentExpanded]]">
              <div
                class="replyActionContainer"
                hidden$="[[!showReplyButton]]"
                hidden=""
              >
                <gr-button
                  class="replyBtn"
                  link=""
                  small=""
                  on-click="_handleReplyTap"
                >
                  Reply
                </gr-button>
                <gr-button
                  disabled$="[[_isDeletingChangeMsg]]"
                  class="deleteBtn"
                  hidden$="[[!_isAdmin]]"
                  hidden=""
                  link=""
                  small=""
                  on-click="_handleDeleteMessage"
                >
                  Delete
                </gr-button>
              </div>
            </template>
            <gr-thread-list
              change="[[change]]"
              hidden$="[[!commentThreads.length]]"
              threads="[[commentThreads]]"
              change-num="[[changeNum]]"
              logged-in="[[_loggedIn]]"
              hide-dropdown
              show-comment-context
            >
            </gr-thread-list>
          </template>
        </div>
      </template>
      <template is="dom-if" if="[[_computeIsReviewerUpdate(message)]]">
        <div class="content">
          <template is="dom-repeat" items="[[message.updates]]" as="update">
            <div class="updateCategory">
              [[update.message]]
              <template
                is="dom-repeat"
                items="[[update.reviewers]]"
                as="reviewer"
              >
                <gr-account-chip account="[[reviewer]]" change="[[change]]">
                </gr-account-chip>
              </template>
            </div>
          </template>
        </div>
      </template>
      <span class="dateContainer">
        <template is="dom-if" if="[[_showViewDiffButton(message)]]">
          <gr-button
            class="patchsetDiffButton"
            on-click="_handleViewPatchsetDiff"
            link
          >
            View Diff
          </gr-button>
        </template>
        <template is="dom-if" if="[[message._revision_number]]">
          <span class="patchset">[[message._revision_number]] |</span>
        </template>
        <template is="dom-if" if="[[!message.id]]">
          <span class="date">
            <gr-date-formatter
              withTooltip
              showDateAndTime
              date-str="[[message.date]]"
            ></gr-date-formatter>
          </span>
        </template>
        <template is="dom-if" if="[[message.id]]">
          <span class="date" on-click="_handleAnchorClick">
            <gr-date-formatter
              withTooltip
              showDateAndTime
              date-str="[[message.date]]"
            ></gr-date-formatter>
          </span>
        </template>
        <iron-icon
          id="expandToggle"
          on-click="_toggleExpanded"
          title="Toggle expanded state"
          icon="[[_computeExpandToggleIcon(_expanded)]]"
        ></iron-icon>
      </span>
    </div>
  </div>
`;