text: 'use strict';
  
  {
    const { createAndAppend } = window.Util;
  
    class HeaderView {
      constructor(account, header, fetchData) {
        this.account = account;
        this.header = header;
        this.fetchData = fetchData;
        this.select = null;
      }
  
      update(state) {
        if (!this.select && !state.error) {
          this.render(state.repos);
        }
      }
  
      /**
       * Renders the data for the 'select' message type. Create a <select> element
       * and its <option> children.
       * @param {Object[]} repos An array of repository objects.
       */
      render(repos) {
        createAndAppend('div', this.header, { text: this.account.name });
        this.select = createAndAppend('select', this.header, {
          class: 'repo-select',
          autofocus: 'autofocus',
        });
  
        repos.forEach(repo =>
          createAndAppend('option', this.select, {
            text: repo.name,
            value: repo.id,
          }),
        );
  
        this.select.addEventListener('change', () =>
          this.fetchData(this.select.value),
        );
      }
    }
  
    window.HeaderView = HeaderView;
  }
  