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

<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.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-spinner/paper-spinner-lite.html">
<link rel="import" href="../controls/settings_checkbox.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../icons.html">
<link rel="import" href="import_data_browser_proxy.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_vars_css.html">

<dom-module id="settings-import-data-dialog">
  <template>
    <style include="settings-shared md-select">
      .description {
        align-items: center;
        display: flex;
        margin-top: 16px;
      }

      paper-spinner-lite {
        margin: 0 8px;
      }

      #successIcon {
        fill: var(--paper-blue-600);
        height: 80px;
        margin: auto;
        width: 100%;
      }

      /* Prevent focus-outline to be chopped by the bottom of dialog body.
         TODO(scottchen): find a more general way to solve this. */
      .md-select {
        margin-top: 2px;
      }

    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}"
        ignore-popstate>
      <div slot="title">$i18n{importTitle}</div>
      <div slot="body">
        <div hidden$="[[!hasImportStatus_(
            importStatusEnum_.SUCCEEDED, importStatus_)]]">
          <iron-icon id="successIcon" icon="settings:check-circle">
          </iron-icon>
          <div hidden$="[[!prefs.import_dialog_bookmarks.value]]">
            <div class="description">$i18n{importSuccess}</div>
            <settings-toggle-button class="first"
                label="$i18n{showBookmarksBar}"
                pref="{{prefs.bookmark_bar.show_on_all_tabs}}">
            </settings-toggle-button>
          </div>
        </div>

        <div hidden$="[[hasImportStatus_(
              importStatusEnum_.SUCCEEDED, importStatus_)]]">
          <select id="browserSelect" class="md-select"
              aria-label="$i18n{importFromLabel}"
              on-change="onBrowserProfileSelectionChange_">
            <template is="dom-repeat" items="[[browserProfiles_]]">
              <option value="[[item.index]]">[[item.name]]</option>
            </template>
          </select>
          <div class="description">$i18n{importDescription}</div>
          <settings-checkbox
              hidden="[[!selected_.history]]"
              pref="{{prefs.import_dialog_history}}"
              label="$i18n{importHistory}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.favorites]]"
              pref="{{prefs.import_dialog_bookmarks}}"
              label="$i18n{importFavorites}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.passwords]]"
              pref="{{prefs.import_dialog_saved_passwords}}"
              label="$i18n{importPasswords}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.search]]"
              pref="{{prefs.import_dialog_search_engine}}"
              label="$i18n{importSearch}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.autofillFormData]]"
              pref="{{prefs.import_dialog_autofill_form_data}}"
              label="$i18n{importAutofillFormData}">
          </settings-checkbox>
        </div>
      </div>
      <div slot="button-container">
        <paper-spinner-lite
            active="[[hasImportStatus_(
                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]">
        </paper-spinner-lite>
        <paper-button id="cancel" class="cancel-button"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]"
            disabled="[[hasImportStatus_(
                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
            on-click="closeDialog_">
          $i18n{cancel}
        </paper-button>
        <paper-button id="import" class="action-button"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]"
            disabled="[[shouldDisableImport_(
                importStatus_, noImportDataTypeSelected_)]]"
            on-click="onActionButtonTap_">
          [[getActionButtonText_(selected_)]]
        </paper-button>

        <paper-button id="done" class="action-button"
            hidden$="[[!hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]"
            on-click="closeDialog_">$i18n{done}</paper-button>
      </div>
    </cr-dialog>
  </template>
  <script src="import_data_dialog.js"></script>
:</dom-module>
