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

<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/html/action_link.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-spinner/paper-spinner-lite.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-stylus">
  <template>
    <style include="settings-shared md-select">
      .settings-box > .secondary {
        align-items: center;
        display: flex;
        /* 'secondary' class applies a top margin. This breaks centering. */
        margin-top: 0;
      }

      paper-spinner-lite {
        margin-left: 12px;
        @apply --cr-icon-height-width;
      }

      cr-policy-indicator {
        padding: 0 var(--cr-controlled-by-spacing);
      }

      #note-taking-app-lock-screen-settings {
        padding: 0 var(--settings-box-row-padding);
      }
    </style>

    <settings-toggle-button id="enableStylusToolsToggle"
        class="continuation"
        pref="{{prefs.settings.enable_stylus_tools}}"
        label="$i18n{stylusEnableStylusTools}">
    </settings-toggle-button>

    <template is="dom-if" if="[[hasInternalStylus_]]">
      <settings-toggle-button
          id ="launchPaletteOnEjectEventToggle"
          pref="{{prefs.settings.launch_palette_on_eject_event}}"
          label="$i18n{stylusAutoOpenStylusTools}"
          disabled="[[!prefs.settings.enable_stylus_tools.value]]">
      </settings-toggle-button>
    </template>

    <div class="settings-box">
      <div id="stylusNoteTakingAppLabel" class="start">
        $i18n{stylusNoteTakingApp}
      </div>

      <div id="no-apps" class="secondary"
          hidden$="[[!showNoApps_(appChoices_, waitingForAndroid_)]]">
        $i18n{stylusNoteTakingAppNoneAvailable}
      </div>

      <div id="waiting" class="secondary" hidden$="[[!waitingForAndroid_]]">
        $i18n{stylusNoteTakingAppWaitingForAndroid}
        <paper-spinner-lite active></paper-spinner-lite>
      </div>

      <select id="selectApp" class="md-select"
          on-change="onSelectedAppChanged_"
          aria-labelledby="stylusNoteTakingAppLabel"
          hidden$="[[!showApps_(appChoices_, waitingForAndroid_)]]">
        <template is="dom-repeat" items="[[appChoices_]]">
          <option value="[[item.value]]" selected="[[item.preferred]]">
            [[item.name]]
          </option>
        </template>
      </select>
    </div>

    <!-- TODO(scottchen): Make a proper a[href].settings-box with
         icon-external (see: https://crbug.com/684005)-->
    <div class="settings-box two-line" on-click="onFindAppsTap_" actionable
        hidden$="[[!prefs.arc.enabled.value]]">
      <div class="start">
        $i18n{stylusFindMoreAppsPrimary}
        <div class="secondary" id="stylusFindMoreAppsSecondary">
          $i18n{stylusFindMoreAppsSecondary}
        </div>
      </div>
      <paper-icon-button-light class="icon-external">
        <button aria-label="$i18n{stylusFindMoreAppsPrimary}"
            aria-describedby="stylusFindMoreAppsSecondary"></button>
      </paper-icon-button-light>
    </div>

    <template is="dom-if" if="[[supportsLockScreen_(selectedApp_)]]">
      <div id="note-taking-app-lock-screen-settings">
        <h2>$i18n{stylusNoteTakingAppLockScreenSettingsHeader}</h2>

        <div class="settings-box first">
          <div id="lock-screen-toggle-label" class="start"
              actionable$="[[!disallowedOnLockScreenByPolicy_(selectedApp_)]]"
              on-click="toggleLockScreenSupport_">
            $i18n{stylusNoteTakingAppEnabledOnLockScreen}
          </div>
          <template is="dom-if"
              if="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]">
            <cr-policy-indicator
                id="enable-app-on-lock-screen-policy-indicator"
                indicator-type="[[userPolicyIndicator_]]">
            </cr-policy-indicator>
          </template>
          <cr-toggle id="enable-app-on-lock-screen-toggle"
              aria-labelledby="lock-screen-toggle-label"
              disabled="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]"
              checked="[[lockScreenSupportEnabled_(selectedApp_)]]"
              on-change="toggleLockScreenSupport_">
          </cr-toggle>
        </div>

        <template is="dom-if" if="[[lockScreenSupportEnabled_(selectedApp_)]]">
          <settings-toggle-button id="keep-last-note-on-lock-screen-toggle"
              pref="{{prefs.settings.restore_last_lock_screen_note}}"
              label="$i18n{stylusNoteTakingAppKeepsLastNoteOnLockScreen}">
          </settings-toggle-button>
        </template>
      </div>
    </template>

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