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

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_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="../i18n_setup.html">
<link rel="import" href="../languages_page/languages_browser_proxy.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-tts-subpage">
  <template>
    <style include="settings-shared md-select">
      h2 {
        padding-inline-start: var(--cr-section-padding);
      }

      .settings-box {
        margin-inline-end: var(--cr-section-padding);
        margin-inline-start: var(--cr-section-indent-padding);
        padding-inline-end: 0;
        padding-inline-start: 0;
      }

      #previewInput {
        width: 100%;
        --cr-input-error-display: none;
      }

      #previewInput cr-button {
        margin-inline-start: 8px;
      }
    </style>

    <h2>$i18n{textToSpeechProperties}</h2>
    <div class="settings-box first">
      <div class="start settings-box-text" id="rate">
        $i18n{textToSpeechRate}
      </div>
      <settings-slider show-markers
          pref="{{prefs.settings.tts.speech_rate}}"
          ticks="[[speechRateTicks_()]]"
          label-min="$i18n{textToSpeechRateMinimumLabel}"
          label-max="$i18n{textToSpeechRateMaximumLabel}"
          aria-describedby="rate">
      </settings-slider>
    </div>
    <div class="settings-box continuation">
      <div class="start settings-box-text" id="pitch">
        $i18n{textToSpeechPitch}
      </div>
      <settings-slider show-markers
          pref="{{prefs.settings.tts.speech_pitch}}"
          ticks="[[speechPitchTicks_()]]"
          label-min="$i18n{textToSpeechPitchMinimumLabel}"
          label-max="$i18n{textToSpeechPitchMaximumLabel}"
          aria-describedby="pitch">
      </settings-slider>
    </div>
    <div class="settings-box continuation">
      <div class="start settings-box-text" id="volume">
        $i18n{textToSpeechVolume}
      </div>
      <settings-slider show-markers
          pref="{{prefs.settings.tts.speech_volume}}"
          ticks="[[speechVolumeTicks_()]]"
          label-min="$i18n{textToSpeechVolumeMinimumLabel}"
          label-max="$i18n{textToSpeechVolumeMaximumLabel}"
          aria-describedby="volume">
      </settings-slider>
    </div>

    <h2>$i18n{textToSpeechPreviewHeading}</h2>
    <div class="settings-box first">
      <div class="start settings-box-text">
        $i18n{textToSpeechPreviewVoice}
      </div>
      <select id="previewVoice" class="md-select"
          label="$i18n{textToSpeechPreviewVoice}"
          value="{{defaultPreviewVoice}}"
          disabled="[[!hasVoices]]">
        <template is="dom-repeat" id="previewVoiceOptions"
            items="[[allVoices]]" as="voice">
          <!-- TODO: Use a combobox with a search field instead. -->
          <option value="[[voice.id]]">
            [[voice.displayLanguage]] - [[voice.name]]
          </option>
        </template>
      </select>
    </div>
    <div class="settings-box continuation">
      <cr-input id="previewInput" label="$i18n{textToSpeechPreviewInputLabel}"
          value="{{previewText_}}"
          disabled="[[isPreviewing_]]">
        <cr-button on-click="onPreviewTtsClick_"
            disabled$="[[!enablePreviewButton_(allVoices, isPreviewing_,
                         previewText_)]]"
            slot="suffix">
          $i18n{textToSpeechPreviewPlay}
        </cr-button>
      </cr-input>
    </div>

    <h2>$i18n{textToSpeechVoices}</h2>
    <template is="dom-repeat" items="[[languagesToVoices]]" as="lang"
        filter="isPrimaryLanguage_"
        sort="alphabeticalSort_">
      <div class="settings-box first">
        <div class="start settings-box-text">
          [[lang.language]]
        </div>
        <settings-dropdown-menu label="[[lang.language]]"
            pref="{{prefs.settings.tts.lang_to_voice_name}}"
            pref-key="[[lang.code]]"
            menu-options="[[menuOptionsForLang_(lang)]]"
            disabled="[[hasOneLanguage_(lang)]]"
            on-settings-control-change="onDefaultTtsVoicePicked_">
        </settings-dropdown-menu>
      </div>
    </template>
    <cr-expand-button
        alt="$i18n{textToSpeechMoreLanguages}"
        class="settings-box continuation"
        expanded="{{languagesOpened}}"
        hidden="[[!hasVoices]]">
      $i18n{textToSpeechMoreLanguages}
    </cr-expand-button>
    <iron-collapse id="moreLanguages" opened="[[languagesOpened]]">
      <template is="dom-repeat" items="[[languagesToVoices]]"
          as="lang" sort="alphabeticalSort_" filter="isSecondaryLanguage_">
        <div class="settings-box continuation">
          <div class="start settings-box-text">
            [[lang.language]]
          </div>
          <settings-dropdown-menu label="[[lang.language]]"
              pref="{{prefs.settings.tts.lang_to_voice_name}}"
              pref-key="[[lang.code]]"
              menu-options="[[menuOptionsForLang_(lang)]]"
              disabled="[[hasOneLanguage_(lang)]]"
              on-settings-control-change="onDefaultTtsVoicePicked_">
          </settings-dropdown-menu>
        </div>
      </template>
    </iron-collapse>
    <div class="settings-box first settings-box-text" hidden$="[[hasVoices]]">
      $i18n{textToSpeechNoVoicesMessage}
    </div>

    <h2>$i18n{textToSpeechEngines}</h2>
    <template is="dom-repeat" items="[[extensions]]" as="extension">
      <div class="settings-box continuation">
        <div id="extension_name_[[index]]" class="start settings-box-text">
          [[extension.name]]
        </div>
        <cr-button on-click="onEngineSettingsTap_"
            aria-describedby$="extension_name_[[index]]"
            hidden$="[[!extension.optionsPage]]">
          $i18n{settings}
        </cr-button>
      </div>
    </template>
  </template>
  <script src="tts_subpage.js"></script>
</dom-module>
