'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;

}