<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/polymer.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.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="/people_page/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;
        min-height: var(--settings-row-min-height);
      }

      paper-spinner {
        margin: 0 8px;
      }

      #successIcon {
        fill: var(--paper-blue-600);
        height: 80px;
        margin: auto;
        width: 100%;
      }
    </style>
    <dialog is="cr-dialog" id="dialog">
      <div class="title">$i18n{importTitle}</div>
      <div class="body">
        <div hidden$="[[!hasImportStatus_(
            importStatusEnum_.SUCCEEDED, importStatus_)]]">
          <iron-icon id="successIcon" icon="settings:check-circle">
          </iron-icon>
          <div hidden$="[[!prefs.import_bookmarks.value]]">
            <div class="description">$i18n{importSuccess}</div>
            <settings-toggle-button class="start"
                label="$i18n{showBookmarksBar}"
                pref="{{prefs.bookmark_bar.show_on_all_tabs}}">
            </settings-toggle-button>
          </div>
        </div>

        <div hidden$="[[hasImportStatus_(
              importStatusEnum_.SUCCEEDED, importStatus_)]]">
          <span class="md-select-wrapper">
            <select id="browserSelect" class="md-select"
                on-change="onBrowserProfileSelectionChange_">
              <template is="dom-repeat" items="[[browserProfiles_]]">
                <option value="[[item.index]]">[[item.name]]</option>
              </template>
            </select>
            <span class="md-select-underline"></span>
          </span>
          <div class="description">$i18n{importDescription}</div>
          <settings-checkbox
              hidden="[[!selected_.history]]"
              pref="{{prefs.import_history}}"
              label="$i18n{importHistory}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.favorites]]"
              pref="{{prefs.import_bookmarks}}"
              label="$i18n{importFavorites}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.passwords]]"
              pref="{{prefs.import_saved_passwords}}"
              label="$i18n{importPasswords}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.search]]"
              pref="{{prefs.import_search_engine}}"
              label="$i18n{importSearch}">
          </settings-checkbox>
          <settings-checkbox
              hidden="[[!selected_.autofillFormData]]"
              pref="{{prefs.import_autofill_form_data}}"
              label="$i18n{importAutofillFormData}">
          </settings-checkbox>
        </div>
      </div>
      <div class="button-container">
        <paper-spinner
            active="[[hasImportStatus_(
                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]">
        </paper-spinner>
        <paper-button id="cancel" class="cancel-button"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]"
            disabled="[[hasImportStatus_(
                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
            on-tap="closeDialog_">
          $i18n{cancel}
        </paper-button>
        <paper-button id="import" class="action-button"
            hidden="[[hasImportStatus_(
                importStatusEnum_.SUCCEEDED, importStatus_)]]"
            disabled="[[shouldDisableImport_(
                importStatus_, noImportDataTypeSelected_)]]"
            on-tap="onActionButtonTap_">
          [[getActionButtonText_(selected_)]]
        </paper-button>

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