<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
<link rel="import" href="display_layout.html">
<link rel="import" href="display_overscan_dialog.html">
<link rel="import" href="display_size_slider.html">
<link rel="import" href="night_light_slider.html">
<link rel="import" href="../controls/settings_dropdown_menu.html">
<link rel="import" href="../controls/settings_slider.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">

<dom-module id="settings-display">
  <template>
    <style include="settings-shared md-select iron-flex iron-flex-alignment paper-tabs-style">
      .indented {
        -webkit-margin-start: var(--cr-section-indent-padding);
        align-self: stretch;
        padding: 0;
      }

      #nightLightTemperatureDiv[disabled] {
        opacity: 0.38;
        pointer-events: none;
      }

      .display-tabs {
        width: 100%;
      }

      display-layout {
        align-self: stretch;
        flex: 1 1;
        height: 300px;
        margin: 10px;
      }

      .text-area {
        margin: 10px 0;
      }

      .settings-box > paper-button:first-child {
        -webkit-padding-start: 0
      }

      #controlsDiv > .settings-box:first-of-type {
        border-top: none;
      }

      #nightLightSlider {
        flex-grow: 1;
        margin-top: 20px;
      }
    </style>
    <div class="settings-box first layout vertical self-stretch">
      <h2 class="layout self-start">
        $i18n{displayArrangementTitle}
      </h2>
      <div class="secondary layout self-start"
          hidden="[[!hasMultipleDisplays_(displays)]]">
        $i18n{displayArrangementText}
      </div>
      <display-layout id="displayLayout"
          selected-display="[[selectedDisplay]]"
          on-select-display="onSelectDisplay_">
      </display-layout>

    <template is="dom-if" if="[[showMirror_(unifiedDesktopMode_, displays)]]"
        restamp>
      <div class="secondary self-start">
        <cr-checkbox checked="[[isMirrored_(displays)]]"
            on-click="onMirroredTap_"
            aria-label="[[getDisplayMirrorText_(displays)]]">
          <div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
        </cr-checkbox>
      </div>
    </template>

    </div>
    <div hidden="[[!hasMultipleDisplays_(displays)]]" class="settings-box">
      <paper-tabs noink selected="[[selectedDisplay.id]]" class="display-tabs"
          on-iron-select="onSelectDisplayTab_" attr-for-selected="display-id">
        <template is="dom-repeat" items="[[displays]]">
          <paper-tab display-id="[[item.id]]">[[item.name]]</paper-tab>
        </template>
      </paper-tabs>
    </div>
    <div hidden="[[hasMultipleDisplays_(displays)]]"
        class="settings-box line-only"></div>

    <div id="controlsDiv" class="settings-box layout vertical first">
      <h2>[[selectedDisplay.name]]</h2>
      <template is="dom-if" if="[[showUnifiedDesktop_(unifiedDesktopAvailable_,
          unifiedDesktopMode_, displays)]]" restamp>
        <div class="settings-box indented two-line">
          <div class="start">
            <div id="displayUnifiedDesktopCheckboxLabel">
              $i18n{displayUnifiedDesktop}
            </div>
            <div class="secondary">
              [[getUnifiedDesktopText_(unifiedDesktopMode_)]]
            </div>
          </div>
          <cr-toggle checked="[[unifiedDesktopMode_]]"
              on-click="onUnifiedDesktopTap_"
              aria-labelledby="displayUnifiedDesktopCheckboxLabel">
          </cr-toggle>
        </div>
      </template>

      <template is="dom-if" restamp
          if="[[showDisplaySelectMenu_(displays, selectedDisplay)]]">
        <div class="settings-box indented">
          <div id="displayScreenTitle" class="start">
            $i18n{displayScreenTitle}
          </div>
          <select class="md-select" on-change="updatePrimaryDisplay_"
              aria-labelledby="displayScreenTitle"
              value="[[getDisplaySelectMenuIndex_(
                  selectedDisplay, primaryDisplayId)]]">
            <option value="0">$i18n{displayScreenPrimary}</option>
            <option value="1">$i18n{displayScreenExtended}</option>
          </select>
          </div>
        </div>
      </template>

      <!-- Slider for selecting resolution when display zoom is disabled -->
      <template is="dom-if" if="[[!showDisplayZoomSetting_]]">
        <div class="settings-box indented two-line">
          <div class="start text-area layout vertical">
            <div>$i18n{displayResolutionTitle}</div>
            <div class="secondary self-start">
              [[getResolutionText_(selectedDisplay, selectedModePref_.value)]]
            </div>
          </div>
          <settings-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
              tick-values="[[modeValues_]]" pref="{{selectedModePref_}}"
              on-change="onSelectedModeSliderChange_">
          </settings-slider>
        </div>
      </template>

      <!-- Display zoom selection slider -->
      <template is="dom-if" if="[[showDisplayZoomSetting_]]">
        <div class="settings-box indented two-line">
          <div class="start text-area layout vertical">
            <div>$i18n{displayZoomTitle}</div>
            <div class="secondary self-start">$i18n{displayZoomSublabel}</div>
            <div class="secondary self-start"
                hidden$="[[!logicalResolutionText_]]">
              [[logicalResolutionText_]]
            </div>
          </div>
          <display-size-slider id="displaySizeSlider"
              ticks="[[zoomValues_]]" pref="{{selectedZoomPref_}}"
              min-label="$i18n{displaySizeSliderMinLabel}"
              max-label="$i18n{displaySizeSliderMaxLabel}"
              on-immediate-value-changed="onDisplaySizeSliderDrag_">
          </display-size-slider>
        </div>

        <!-- Drop down select menu for resolution -->
        <div class="settings-box indented two-line"
            hidden$="[[!showDropDownResolutionSetting_(selectedDisplay)]]">
          <div class="start text-area layout vertical">
            <div>$i18n{displayResolutionTitle}</div>
            <div class="secondary self-start">
              $i18n{displayResolutionSublabel}
            </div>
          </div>
          <settings-dropdown-menu id="displayModeSelector"
              pref="{{selectedModePref_}}"
              label="Display Mode Menu"
              menu-options="[[displayModeList_]]">
          </settings-dropdown-menu>
        </div>
      </template>
      <template is="dom-if" if="[[!unifiedDesktopMode_]]" restamp>
        <div class="settings-box indented">
          <div id="displayOrientation" class="start text-area">
            $i18n{displayOrientation}
          </div>
          <select class="md-select" value="[[selectedDisplay.rotation]]"
              disabled="[[selectedDisplay.isTabletMode]]"
              aria-labelledby="displayOrientation"
              on-change="onOrientationChange_">
            <option value="0">$i18n{displayOrientationStandard}</option>
            <option value="90">90</option>
            <option value="180">180</option>
            <option value="270">270</option>
          </select>
        </div>
      </template>

      <cr-link-row icon-class="subpage-arrow" class="indented hr"
          id="overscan" label="$i18n{displayOverscanPageTitle}"
          sub-label="$i18n{displayOverscanPageText}" on-click="onOverscanTap_"
          hidden$="[[!showOverscanSetting_(selectedDisplay)]]">
      </cr-link-row>

      <settings-display-overscan-dialog id="displayOverscan"
          display-id="{{overscanDisplayId}}"
          on-close="onCloseOverscanDialog_">
      </settings-display-overscan-dialog>

      <div class="settings-box indented two-line"
          on-click="onTouchCalibrationTap_"
          hidden$="[[!showTouchCalibrationSetting_(selectedDisplay)]]"
          actionable>
        <div class="start">
          $i18n{displayTouchCalibrationTitle}
          <div class="secondary" id="touchCalibrationSecondary">
            $i18n{displayTouchCalibrationText}
          </div>
        </div>
        <paper-icon-button-light class="subpage-arrow">
          <button aria-label="$i18n{displayTouchCalibrationTitle}"
              aria-describedby="touchCalibrationSecondary"></button>
        </paper-icon-button-light>
      </div>
    </div>

    <!-- Night Light Settings -->
    <template is="dom-if" if="[[nightLightFeatureEnabled_]]" restamp>
      <settings-toggle-button
          id="nightLightToggleButton"
          label="$i18n{displayNightLightLabel}"
          pref="{{prefs.ash.night_light.enabled}}"
          sub-label="$i18n{displayNightLightText}">
      </settings-toggle-button>
      <div id="nightLightSettingsDiv"
          class="settings-box continuation start layout vertical">
        <!-- Color temperature slider -->
        <div id="nightLightTemperatureDiv"
            class="settings-box indented continuation"
            disabled$="[[!prefs.ash.night_light.enabled.value]]">
          <div class="start text-area" id="colorTemperatureLabel">
            $i18n{displayNightLightTemperatureLabel}
          </div>
          <settings-slider id="colorTemperatureSlider"
              aria-labelledby="colorTemperatureLabel" min="0" max="100"
              scale="100" label-min="$i18n{displayNightLightTempSliderMinLabel}"
              label-max="$i18n{displayNightLightTempSliderMaxLabel}"
              pref="{{prefs.ash.night_light.color_temperature}}"
              disabled$="[[!prefs.ash.night_light.enabled.value]]">
          </settings-slider>
        </div>
        <!-- Schedule settings -->
        <div class="settings-box indented">
          <div class="start text-area">
            <div id="nightLightScheduleLabel" class="label">
              $i18n{displayNightLightScheduleLabel}
            </div>
            <div id="nightLightScheduleSubLabel" class="secondary label"
                hidden$="[[!nightLightScheduleSubLabel_]]">
              [[nightLightScheduleSubLabel_]]
            </div>
          </div>
          <settings-dropdown-menu
              id="nightLightScheduleTypeDropDown"
              aria-labelledby="nightLightScheduleLabel"
              pref="{{prefs.ash.night_light.schedule_type}}"
              menu-options="[[scheduleTypesList_]]">
          </settings-dropdown-menu>
        </div>
        <!-- Custom schedule slider -->
        <div class="settings-box indented continuation">
          <iron-collapse id="nightLightCustomScheduleCollapse"
              class="start text-area layout vertical"
              opened="[[shouldOpenCustomScheduleCollapse_]]">
            <div class="settings-box continuation self-stretch">
              <night-light-slider id="nightLightSlider" prefs="{{prefs}}">
              </night-light-slider>
            </div>
          </iron-collapse>
        </div>
      </div>
    </template>

  </template>
  <script src="display.js"></script>
</dom-module>