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

<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../controls/settings_slider.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-manage-a11y-page">
  <template>
    <style include="settings-shared">
      h2 {
        padding-inline-start: var(--cr-section-padding);
      }

      .sub-item {
        margin-inline-start: var(--cr-section-indent-width);
      }

      h2 ~ .settings-box,
      h2 ~ settings-toggle-button,
      h2 ~ cr-link-row,
      iron-collapse .settings-box,
      iron-collapse settings-toggle-button,
      iron-collapse cr-link-row {
        margin-inline-end: var(--cr-section-padding);
        margin-inline-start: var(--cr-section-indent-padding);
        padding-inline-end: 0;
        padding-inline-start: 0;
      }
    </style>
    <div class="settings-box row first">
      <span>
        $i18n{a11yExplanation}
        <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank">
          $i18n{learnMore}
        </a>
      </span>
    </div>

    <h2>$i18n{textToSpeechHeading}</h2>
    <settings-toggle-button class="first"
        pref="{{prefs.settings.accessibility}}"
        label="$i18n{chromeVoxLabel}">
    </settings-toggle-button>
    <iron-collapse opened="[[prefs.settings.accessibility.value]]">
      <cr-link-row class="settings-box" on-click="onChromeVoxSettingsTap_"
          label="$i18n{chromeVoxOptionsLabel}" external></cr-link-row>
    </iron-collapse>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.select_to_speak}}"
        label="$i18n{selectToSpeakTitle}"
        sub-label="[[getSelectToSpeakDescription_(
            prefs.settings.a11y.select_to_speak.value, hasKeyboard_,
            '$i18nPolymer{selectToSpeakDisabledDescription}',
            '$i18nPolymer{selectToSpeakDescription}',
            '$i18nPolymer{selectToSpeakDescriptionWithoutKeyboard}')]]">
    </settings-toggle-button>
    <iron-collapse opened="[[prefs.settings.a11y.select_to_speak.value]]">
      <cr-link-row class="settings-box" on-click="onSelectToSpeakSettingsTap_"
          label="$i18n{selectToSpeakOptionsLabel}" external></cr-link-row>
    </iron-collapse>

    <cr-link-row class="hr" label="$i18n{manageTtsSettings}"
        on-click="onManageTtsSettingsTap_"
        sub-label="$i18n{ttsSettingsLinkDescription}" embedded></cr-link-row>

    <h2>$i18n{displayHeading}</h2>
    <settings-toggle-button class="first"
        pref="{{prefs.settings.a11y.high_contrast_enabled}}"
        label="$i18n{highContrastLabel}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.screen_magnifier}}"
        label="$i18n{screenMagnifierLabel}"
        disabled="[[prefs.ash.docked_magnifier.enabled.value]]">
    </settings-toggle-button>
    <div class="settings-box continuation">
      <div class="start sub-item settings-box-text">
        $i18n{screenMagnifierZoomLabel}
      </div>
      <settings-dropdown-menu label="$i18n{screenMagnifierZoomLabel}"
          pref="{{prefs.settings.a11y.screen_magnifier_scale}}"
          menu-options="[[screenMagnifierZoomOptions_]]"
          disabled="[[!prefs.settings.a11y.screen_magnifier.value]]">
      </settings-dropdown-menu>
    </div>
    <settings-toggle-button
        pref="{{prefs.ash.docked_magnifier.enabled}}"
        label="$i18n{dockedMagnifierLabel}"
        disabled="[[prefs.settings.a11y.screen_magnifier.value]]">
    </settings-toggle-button>
    <div class="settings-box continuation">
      <div class="start sub-item settings-box-text">
        $i18n{dockedMagnifierZoomLabel}
      </div>
      <settings-dropdown-menu label="$i18n{dockedMagnifierZoomLabel}"
          pref="{{prefs.ash.docked_magnifier.scale}}"
          menu-options="[[screenMagnifierZoomOptions_]]"
          disabled="[[!prefs.ash.docked_magnifier.enabled.value]]">
      </settings-dropdown-menu>
    </div>
    <cr-link-row class="hr" label="$i18n{displaySettingsTitle}"
        on-click="onDisplayTap_" sub-label="$i18n{displaySettingsDescription}"
        embedded></cr-link-row>
    <cr-link-row class="hr" label="$i18n{appearanceSettingsTitle}"
        on-click="onAppearanceTap_"
        sub-label="$i18n{appearanceSettingsDescription}" embedded></cr-link-row>

    <h2>$i18n{keyboardAndTextInputHeading}</h2>
    <settings-toggle-button class="first"
        pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
        label="$i18n{stickyKeysLabel}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.virtual_keyboard}}"
        label="$i18n{onScreenKeyboardLabel}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.dictation}}"
        label="$i18n{dictationLabel}"
        sub-label="$i18n{dictationDescription}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.focus_highlight}}"
        label="$i18n{focusHighlightLabel}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.caret_highlight}}"
        label="$i18n{caretHighlightLabel}">
    </settings-toggle-button>
    <template is="dom-if" if="[[showExperimentalSwitchAccess_]]">
      <settings-toggle-button
          pref="{{prefs.settings.a11y.switch_access.enabled}}"
          label="$i18n{switchAccessLabel}">
      </settings-toggle-button>
      <iron-collapse
          opened="[[prefs.settings.a11y.switch_access.enabled.value]]">
        <cr-link-row label="$i18n{switchAccessOptionsLabel}"
            on-click="onSwitchAccessSettingsTap_" embedded external>
        </cr-link-row>
      </iron-collapse>
    </template>
    <cr-link-row class="hr" label="$i18n{keyboardSettingsTitle}"
        on-click="onKeyboardTap_" sub-label="$i18n{keyboardSettingsDescription}"
        embedded></cr-link-row>

    <h2>$i18n{mouseAndTouchpadHeading}</h2>
    <settings-toggle-button class="first"
        pref="{{prefs.settings.a11y.autoclick}}"
        label="$i18n{clickOnStopLabel}">
    </settings-toggle-button>
    <div class="settings-box continuation"
        hidden$="[[!prefs.settings.a11y.autoclick.value]]">
      <div class="start sub-item settings-box-text">
        $i18n{delayBeforeClickLabel}
      </div>
      <settings-dropdown-menu label="$i18n{delayBeforeClickLabel}"
          pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
          menu-options="[[autoClickDelayOptions_]]"
          disabled="[[!prefs.settings.a11y.autoclick.value]]">
      </settings-dropdown-menu>
    </div>
    <div class="sub-item">
      <settings-toggle-button class="continuation sub-item"
        hidden$="[[!prefs.settings.a11y.autoclick.value]]"
        pref="{{prefs.settings.a11y.autoclick_stabilize_position}}"
        label="$i18n{autoclickStabilizeCursorPosition}">
      </settings-toggle-button>
    </div>
    <div class="sub-item">
      <settings-toggle-button class="continuation sub-item"
        hidden$="[[!prefs.settings.a11y.autoclick.value]]"
        pref="{{prefs.settings.a11y.autoclick_revert_to_left_click}}"
        label="$i18n{autoclickRevertToLeftClick}">
      </settings-toggle-button>
    </div>
    <div class="settings-box continuation"
        hidden$="[[!prefs.settings.a11y.autoclick.value]]">
      <div class="start sub-item settings-box-text"
          id="autoclickMovementThresholdLabel">
        $i18n{autoclickMovementThresholdLabel}
      </div>
      <settings-dropdown-menu
          aria-labelledby="autoclickMovementThresholdLabel"
          pref="{{prefs.settings.a11y.autoclick_movement_threshold}}"
          menu-options="[[autoClickMovementThresholdOptions_]]"
          disabled="[[!prefs.settings.a11y.autoclick.value]]">
      </settings-dropdown-menu>
    </div>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.large_cursor_enabled}}"
        label="$i18n{largeMouseCursorLabel}">
    </settings-toggle-button>
    <div class="settings-box continuation"
        hidden$="[[!prefs.settings.a11y.large_cursor_enabled.value]]">
      <div class="start sub-item settings-box-text">
        $i18n{largeMouseCursorSizeLabel}
      </div>
      <settings-slider
          pref="{{prefs.settings.a11y.large_cursor_dip_size}}"
          min="25" max="64"
          label-min="$i18n{largeMouseCursorSizeDefaultLabel}"
          label-max="$i18n{largeMouseCursorSizeLargeLabel}">
      </settings-slider>
    </div>
    <settings-toggle-button
        pref="{{prefs.settings.a11y.cursor_highlight}}"
        label="$i18n{cursorHighlightLabel}">
    </settings-toggle-button>
    <cr-link-row class="hr" label="$i18n{mouseSettingsTitle}"
        on-click="onMouseTap_" sub-label="$i18n{mouseSettingsDescription}"
        embedded></cr-link-row>

    <h2>$i18n{audioHeading}</h2>
    <settings-toggle-button class="first"
        pref="{{prefs.settings.a11y.mono_audio}}"
        label="$i18n{monoAudioLabel}">
    </settings-toggle-button>
    <settings-toggle-button id="startupSoundEnabled" class="first"
        pref=" "
        on-change="toggleStartupSoundEnabled_"
        label="$i18n{startupSoundLabel}">
    </settings-toggle-button>

    <template is="dom-if" if="[[!isGuest_]]">
      <a class="settings-box inherit-color no-outline" tabindex="-1"
          target="_blank"
          href="https://chrome.google.com/webstore/category/collection/accessibility">
        <div class="start settings-box-text">
          $i18n{additionalFeaturesTitle}
          <div class="secondary" id="moreFeaturesSecondary">
            $i18n{a11yWebStore}
          </div>
        </div>
        <cr-icon-button actionable class="icon-external"
            aria-label="$i18n{additionalFeaturesTitle}"
            aria-describedby="moreFeaturesSecondary"></cr-icon-button>
      </a>
    </template>
  </template>
  <script src="manage_a11y_page.js"></script>
</dom-module>
