import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss';

const isMobile = () => window.innerWidth < 720;

class AppPriceTable extends HTMLElement {
	constructor() {
		super();

		this.isMobile = isMobile();

		window.addEventListener('resize', this.resized.bind(this));
	}

	connectedCallback() {
		this.root = this.attachShadow({ mode: 'open' });

		const style = document.createElement('style');
		style.textContent = styles;
		this.root.appendChild(style);

		fetch(this.dataset.content)
			.then(response => response.json())
			.then(data => {
				this.data = data;
				this.renderTable();
			});
	}

	renderTable() {
		if (this.table) {
			this.table.remove();
		}

		this.table = document.createElement('table');
		this.table.className = 'table';
		this.table.cellSpacing = 0;

		const thead = document.createElement('thead');

		const theadRow = document.createElement('tr');

		if (this.isMobile) {
			const detailsCol = document.createElement('th');
			detailsCol.innerText = 'Detalii';
			theadRow.appendChild(detailsCol);

			const priceCol = document.createElement('th');
			priceCol.innerText = this.data.columns[this.data.columns.length - 1];
			theadRow.appendChild(priceCol);
		} else {
			this.data.columns.forEach(column => {
				const col = document.createElement('th');
				col.innerText = column;
				theadRow.appendChild(col);
			});
		}

		thead.appendChild(theadRow);
		this.table.appendChild(thead);

		const tbody = document.createElement('tbody');

		this.data.data.forEach(item => {
			const row = document.createElement('tr');

			if (this.isMobile) {
				const detailsCell = document.createElement('td');

				const detailsTable = document.createElement('table');
				const detailsTableBody = document.createElement('tbody');

				item.slice(0, -1).forEach((field, i) => {
					const detailsRow = document.createElement('tr');
					const nameCell = document.createElement('td');
					const valueCell = document.createElement('td');

					nameCell.innerText = this.data.columns[i] + ': ';
					valueCell.innerText = field + ' ' + this.data.units[i];

					detailsRow.appendChild(nameCell);
					detailsRow.appendChild(valueCell);

					detailsTableBody.appendChild(detailsRow);
				});

				detailsTable.appendChild(detailsTableBody);
				detailsCell.appendChild(detailsTable);
				row.appendChild(detailsCell);

				const priceCell = document.createElement('td');
				priceCell.innerText =
					item[item.length - 1] + ' ' + this.data.units[item.length - 1];
				row.appendChild(priceCell);
			} else {
				item.forEach((field, i) => {
					const cell = document.createElement('td');
					cell.innerText = field + ' ' + this.data.units[i];
					row.appendChild(cell);
				});
			}

			tbody.appendChild(row);
		});

		this.table.appendChild(tbody);

		this.root.appendChild(this.table);
	}

	resized() {
		if (isMobile() != this.isMobile) {
			this.isMobile = isMobile();
			this.renderTable();
		}
	}

	static get observedAttributes() {
		return ['data-content'];
	}
}

customElements.define('app-price-table', AppPriceTable);
