/**
 * @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="gr-voting-styles">
      /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
    </style>
    <style include="shared-styles">
      :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);
      }
      .collapsed .contentContainer {
        /* For expanded state we inherit the alternating background color
           that is set in gr-messages-list. */
        background-color: var(--background-color-primary);
      }
      .name {
        font-weight: var(--font-weight-bold);
      }
      .message {
        --gr-formatted-text-prose-max-width: 80ch;
      }
      .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-comment-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-xs);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .collapsed .dateContainer {
        position: static;
      }
      .collapsed .author {
        overflow: hidden;
        color: var(--primary-text-color);
        margin-right: var(--spacing-s);
      }
      .authorLabel {
        min-width: 160px;
        display: inline-block;
      }
      .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 .patchset {
        margin-right: var(--spacing-m);
        color: var(--deemphasized-text-color);
      }
      .dateContainer .patchset:before {
        content: 'Patchset ';
      }
      span.date {
        color: var(--deemphasized-text-color);
      }
      span.date:hover {
        text-decoration: underline;
      }
      .dateContainer iron-icon {
        cursor: pointer;
        vertical-align: top;
      }
      .score {
        border-radius: var(--border-radius);
        color: var(--primary-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);
      }
      .score.negative.min {
        background-color: var(--vote-color-rejected);
      }
      .score.positive {
        background-color: var(--vote-color-recommended);
      }
      .score.positive.max {
        background-color: var(--vote-color-approved);
      }
      gr-account-label {
        --gr-account-label-text-style: {
          font-weight: var(--font-weight-bold);
        };
      }
      @media screen and (max-width: 50em) {
        .expanded .content {
          padding-left: 0;
        }
        .score,
        .commentsSummary,
        .authorLabel {
          min-width: 0px;
        }
        .dateContainer .patchset:before {
          content: 'PS ';
        }
      }
    </style>
    <div class\$="[[_computeClass(_expanded)]]">
      <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">
            <div class="message hideOnOpen">[[_messageContentCollapsed]]</div>
            <gr-formatted-text no-trailing-margin="" class="message hideOnCollapsed" content="[[_messageContentExpanded]]" config="[[_projectConfig.commentlinks]]"></gr-formatted-text>
            <template is="dom-if" if="[[!_isMessageContentEmpty()]]">
              <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-comment-list comments="[[comments]]" change-num="[[changeNum]]" patch-num="[[message._revision_number]]" project-name="[[projectName]]" project-config="[[_projectConfig]]"></gr-comment-list>
          </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]]">
                  </gr-account-chip>
                </template>
              </div>
            </template>
          </div>
        </template>
        <span class="dateContainer">
          <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 has-tooltip="" show-date-and-time="" 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 has-tooltip="" show-date-and-time="" 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>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;