import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style>
  :host {
    /* Variables controlling the rendered post selection */
    --post-selection-corner-width: 4px;
    --post-selection-corner-hitbox-max-size: 40px;
    position: relative;
  }

  #postSelectionScrim {
    background-color: var(--color-scrim);
    height: 100%;
    opacity: 20%;
    transition: opacity cubic-bezier(0.2, 0, 0, 1) 400ms;
    width: 100%;
  }

  :host([region-selected-glow-enabled]) #postSelectionScrim {
    /* Hide this scrim because its superfluous here - the region_selection scrim
    * is already active and has transitioned to its post-selection opacity. */
    display: none;
  }

  #activeSelectionWrapper {
    inset: 0;
    position: absolute;
    pointer-events: none;
  }

  /** Render the selected part of the image again so it appears glowing over
      the scrim */
  #backgroundImageCanvas {
    clip-path: rect(
      var(--selection-top) calc(var(--selection-left) + var(--selection-width))
        calc(var(--selection-top) + var(--selection-height)) var(--selection-left) round
        var(--post-selection-cutout-corner-radius)
    );
    height: 100%;
    inset: 0;
    object-fit: contain;
    position: absolute;
    width: 100%;
  }

  :host([active-region-has-polyline]) #backgroundImageCanvas {
    clip-path: var(--active-selection-clip-path);
  }

  :host([region-selected-glow-enabled]) #backgroundImageCanvas {
    /* Do not use z-index once region-selection-glow-enabled is launched.
     * Instead, move the backgroundImageCanvas higher in the DOM. */
    z-index: 2;
  }

  #postSelection {
    /* Scrim is rendered here too, so that the rendered screenshot is dark
     * as if it were under the scrim as well. */
    background-color: var(--color-scrim);
    border-radius: var(--post-selection-cutout-corner-radius);
    height: var(--selection-height);
    left: var(--selection-left);
    margin: auto;
    opacity: 5%;
    pointer-events: auto;
    position: absolute;
    top: var(--selection-top);
    transition: opacity 100ms cubic-bezier(0.3, 0, 1, 1);
    width: var(--selection-width);
  }

  :host([active-region-has-polyline]) #postSelection {
    border-radius: 0;
    clip-path: var(--active-selection-clip-path);
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }

  :host([region-selected-glow-enabled]) #postSelection {
    background-color: transparent;
    opacity: 1;
    transition: none;
  }

  :host([region-selected-glow-enabled]:not([background-gradient-hidden]))
    #postSelection:before {
    animation: postSelectionGlowFadeIn 120ms cubic-bezier(0, 0, 0, 1) forwards;
    background: conic-gradient(
      from 90deg at center,
      var(--gradient-blue) 0deg,
      var(--gradient-blue) 162deg,
      var(--gradient-red) 216deg,
      var(--gradient-yellow) 274deg,
      var(--gradient-green) 331deg
    );
    content: "";
    /* Generally blur should be avoided for performance reasons but it's ok here
     * because it's only being calculated once */
    filter: blur(var(--region-selected-glow-blur-radius, 0px));
    inset: 0;
    /* Set opacity to 0 to prevent the glow from being visible until the
     * animation starts. */
    opacity: 0;
    position: absolute;
    /* Necessary to position above the region selection scrim. */
    z-index: 1;
  }

  @keyframes postSelectionGlowFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  :host([should-darken-scrim]:not([region-selected-glow-enabled])) #postSelection {
    opacity: 20%;
  }

  #selectionCorners {
    background-image: paint(post-selection);
    forced-color-adjust: none;
    height: calc(var(--selection-height) + (2 * var(--post-selection-corner-width)));
    left: calc(var(--selection-left) - var(--post-selection-corner-width));
    position: absolute;
    top: calc(var(--selection-top) - var(--post-selection-corner-width));
    width: calc(var(--selection-width) + (2 * var(--post-selection-corner-width)));
    z-index: 5; /* Position above words. */
    pointer-events: auto;
  }

  :host([active-region-has-polyline]) #selectionCorners {
    display: none;
  }

  :host([multi-region-selection-enabled]) #selectionCorners {
    filter: drop-shadow(0 0 8px rgba(8, 66, 160, 0.45));
  }

  .corner-hit-box {
    height: 50%;
    max-height: var(--post-selection-corner-hitbox-max-size);
    max-width: var(--post-selection-corner-hitbox-max-size);
    min-height: var(--post-selection-corner-length);
    min-width: var(--post-selection-corner-length);
    pointer-events: all;
    position: absolute;
    width: 50%;
  }

  .corner-hit-box:focus-within {
    outline: auto 5px -webkit-focus-ring-color;
  }

  #topLeft {
    cursor: nw-resize;
    left: 0;
    top: 0;
    transform: translate(-25%, -25%);
  }

  #topRight {
    cursor: ne-resize;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
  }

  #bottomRight {
    cursor: se-resize;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
  }

  #bottomLeft {
    cursor: sw-resize;
    bottom: 0;
    left: 0;
    transform: translate(-25%, 25%);
  }

  .slider {
    height: inherit;
    width: inherit;
    pointer-events: none;
    position: absolute;
    opacity: 0;
  }

  .static-region {
    position: absolute;
    /* Enable pointer events so the user can click this static box to
       re-activate it. */
    pointer-events: auto;
    z-index: 5;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: var(--static-region-corner-radius, 24px);
    background: linear-gradient(to right, #C6E6FF, #E0E7FF) border-box;
    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    box-sizing: border-box;
  }

  .static-region[has-polyline] {
    border: none;
    background: none;
    -webkit-mask: none;
  }

  .static-region-cutout {
    position: absolute;
    /* It covers the entire overlay area. */
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
  }

  .close-button {
    --cr-icon-button-icon-size: 22px;
    --cr-icon-button-size: 28px;
    --cr-icon-button-fill-color: white;
    --cr-icon-image: url("icon_clear.svg");
    background-color: #5f6368cc;
    border-radius: 50%;
    height: 28px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 28px;
    z-index: 10;
    pointer-events: auto;
  }

  .close-button-polyline {
    --cr-icon-button-icon-size: 22px;
    --cr-icon-button-size: 28px;
    --cr-icon-button-fill-color: white;
    --cr-icon-image: url("icon_clear.svg");
    background-color: #5f6368cc;
    border-radius: 50%;
    height: 28px;
    position: absolute;
    left: calc(var(--selection-left) + var(--selection-width) - 14px);
    top: calc(var(--selection-top) - 14px);
    width: 28px;
    z-index: 10;
    pointer-events: auto;
  }

  #activeRegionShadow {
    display: none;
  }

  :host([multi-region-selection-enabled]) #activeRegionShadow {
    display: block;
    border-radius: var(--post-selection-cutout-corner-radius);
    box-shadow: 0 0 var(--region-selected-glow-blur-radius, 20px) 2px #9DD2FF;
    height: var(--selection-height);
    left: var(--selection-left);
    pointer-events: none;
    position: absolute;
    top: var(--selection-top);
    width: var(--selection-width);
    z-index: 2;
  }

  :host([multi-region-selection-enabled][active-region-has-polyline]) #activeRegionShadow {
    border-radius: 0;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
    filter: drop-shadow(0 0 var(--region-selected-glow-blur-radius, 12px) #9DD2FF);
  }

  #activeRegionShadowShape {
    display: none;
  }

  :host([multi-region-selection-enabled][active-region-has-polyline]) #activeRegionShadowShape {
    display: block;
    clip-path: var(--active-selection-clip-path);
    height: 100%;
    width: 100%;
    background-color: white;
  }
</style>
<div id="postSelectionScrim" style$="[[getScrimStyleProperties(height, width)]]"></div>
<template is="dom-if" if="[[multiRegionSelectionEnabled]]">
  <template is="dom-repeat" items="[[staticRegions]]">
    <canvas
      class="static-region-cutout"
      data-id$="[[item.id]]"
      height="[[canvasPhysicalHeight]]"
      width="[[canvasPhysicalWidth]]"
      style$="clip-path: [[item.clipPath]]; height: [[canvasHeight]]px;
              width: [[canvasWidth]]px;">
    </canvas>
    <div class="static-region"
        has-polyline$="[[item.hasPolyline]]"
        data-id$="[[item.id]]"
        style$="left: [[item.left]]; top: [[item.top]];
                width: [[item.width]]; height: [[item.height]];">
    </div>
  </template>
</template>
<div hidden$="[[!hasSelection(height, width, activePolylinePoints)]]" id="activeSelectionWrapper">
  <div id="activeRegionShadow">
    <div id="activeRegionShadowShape"
      style$="[[getPostSelectionStyles(top, left, width, height, selectionOverlayRect, activeRegionId, selectedRegions.*, activePolylinePoints)]]">
    </div>
  </div>
  <canvas
    id="backgroundImageCanvas"
    height="[[canvasPhysicalHeight]]"
    width="[[canvasPhysicalWidth]]"
    style$="height: [[canvasHeight]]px; width: [[canvasWidth]]px; [[getPostSelectionStyles(top, left, width, height, selectionOverlayRect, activeRegionId, selectedRegions.*, activePolylinePoints)]]"
  >
  </canvas>
  <div
    style$="[[getPostSelectionStyles(top, left, width, height, selectionOverlayRect, activeRegionId, selectedRegions.*, activePolylinePoints)]]"
    id="postSelection"
    data-id$="[[activeRegionId]]"
  ></div>
  <template is="dom-if" if="[[showPolylineCloseButton(multiRegionSelectionEnabled, activeRegionHasPolyline)]]">
    <cr-icon-button class="close-button-polyline"
        on-click="onCloseActiveButtonClick"
        on-pointerdown="onCloseButtonPointerdown"
        title="$i18n{close}">
    </cr-icon-button>
  </template>
  <div id="selectionCorners" style="pointer-events: auto;">
    <template is="dom-if" if="[[multiRegionSelectionEnabled]]">
      <cr-icon-button class="close-button"
          on-click="onCloseActiveButtonClick"
          on-pointerdown="onCloseButtonPointerdown"
          title="$i18n{close}">
      </cr-icon-button>
    </template>
    <template is="dom-repeat" items="[[cornerIds]]">
      <div id="[[item]]" class="corner-hit-box">
        <template is="dom-if" if="[[cornerSlidersEnabled]]">
          <input
            id="[[item]]Slider"
            type="range"
            tabindex="0"
            min="-1"
            max="101"
            step="1"
            class="slider"
            on-change="handleSliderChange"
            data-corner-id$="[[item]]"
          />
        </template>
      </div>
    </template>
  </div>
</div>
<!--_html_template_end_-->`;
}
