text: import '@brightspace-ui/core/components/colors/colors';
  import 'd2l-fetch/d2l-fetch.js';
  
  import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '@brightspace-ui/core/components/typography/styles.js';
  import { css, LitElement } from 'lit-element/lit-element.js';
  import { customHypermediaElement, html } from '@brightspace-hmc/foundation-engine/framework/lit/hypermedia-components.js';
  import { HypermediaStateMixin, observableTypes } from '@brightspace-hmc/foundation-engine/framework/lit/HypermediaStateMixin.js';
  import { LocalizeQuizEditor } from './lang/localization.js';
  import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
  
  const rels = Object.freeze({
  	questionText: 'https://questions.api.brightspace.com/rels/questionText',
  	specialization: 'https://api.brightspace.com/rels/specialization',
  	parentCollections: 'https://activities.api.brightspace.com/rels/parent-collections',
  	activityUsage: 'https://activities.api.brightspace.com/rels/activity-usage',
  	item: 'item'
  });
  const route = {
  	questionText: { observable: observableTypes.subEntity,	rel: rels.questionText },
  	specialization: { observable: observableTypes.link, rel: rels.specialization },
  	parentCollections: { observable: observableTypes.link, rel: rels.parentCollections }
  };
  const componentClass = class extends SkeletonMixin(HypermediaStateMixin(LocalizeQuizEditor(LitElement))) {
  	static get properties() {
  		return {
  			number: {
  				type: Number
  			},
  			quizActivityUsageHref: {
  				type: String
  			},
  			questionText: {
  				type: String,
  				observable: observableTypes.property,
  				id: 'text',
  				route: [route.specialization, route.questionText]
  			},
  			name: {
  				type: String,
  				observable: observableTypes.property,
  				id: 'name',
  				route: [route.specialization]
  			},
  			typeText: {
  				type: String,
  				observable: observableTypes.property,
  				id: 'typeText',
  				route: [route.specialization]
  			},
  			parentCollections: {
  				type: Array,
  				observable: observableTypes.subEntities,
  				rel: rels.item,
  				route: [route.parentCollections]
  			},
  			parentCollectionsName: {
  				type: Array
  			},
  			points: {
  				type: Number
  			}
  		};
  	}
  
  	static get styles() {
  		return [
  			super.styles,
  			bodyStandardStyles, bodyCompactStyles,
  			bodySmallStyles,
  			css `
  				:host {
  					display: block;
  					width: 100%;
  				}
  				.question-item {
  					display: flex;
  					flex-wrap: nowrap;
  					width: 100%;
  					justify-content: space-between;
  				}
  				.question {
  					flex-grow: 1;										
  				}
  				.question-number {
  					flex-basis: 4rem;
  				}
  				.points {
  					text-align: end;
  					flex-basis: 5rem;
  				}
  				.question-type {
  					color: var(--d2l-color-tungsten);
  					max-width: 10rem;
  					margin: 0;
  				}
  			`];
  	}
  
  	constructor() {
  		super();
  		this.skeleton = true;
  		this.parentCollections = [];
  		this.parentCollectionsName = [];
  	}
  
  	render() {
  		return html`
  			<div class="question-item d2l-skeletize">
  				<div class="d2l-body-standard question-number d2l-skeletize">${this.number}</div>
  				<div class="question d2l-skeletize">
  					<span class="d2l-body-compact d2l-skeletize">${this.name || this.questionText}</span>
  					<div question-type>
  						<span class="d2l-body-small d2l-skeletize">${this.typeText}</span>
  						${this.parentCollections.length > 1 ?
  		html`<d2l-icon icon="d2l-tier1:bullet"></d2l-icon>
  								 <span class="d2l-body-small d2l-skeletize">
  								 	${this._getAlsoInString()}
  								 </span>` :
  		html``}
  					</div>
  				</div>
  				<div class="points d2l-body-compact d2l-skeletize">${this.localize('points', { count: this.points })}</div>
  			</div>
  		`;
  	}
  
  	updated(changedProperties) {
  		if (changedProperties.has('parentCollections') &&
  			this.parentCollections.length > 0 &&
  			this.parentCollections.length > changedProperties.get('parentCollections').length) {
  			this._getParentCollectionsName();
  		}
  	}
  
  	get _loaded() {
  		return !this.skeleton;
  	}
  
  	set _loaded(loaded) {
  		this.skeleton = !loaded;
  	}
  
  	_getActivityUsageHref(item) {
  		const activityUsageHref = item.links.find(link => link.rel.includes(rels.activityUsage)).href;
  		return activityUsageHref;
  	}
  
  	_getAlsoInString() {
  		let alsoInString = `${this.localize('also_in')} `;
  		for (let i = 0; i < this.parentCollectionsName.length; i++) {
  			alsoInString = alsoInString + this.parentCollectionsName[i];
  			if (i < this.parentCollectionsName.length - 1) {
  				alsoInString = `${alsoInString}, `;
  			}
  		}
  
  		return alsoInString;
  	}
  
  	_getParentCollectionsName() {
  		for (let i = 0; i < this.parentCollections.length; i++) {
  			const activityUsageHref = this._getActivityUsageHref(this.parentCollections[i]);
  			if (this.quizActivityUsageHref !== activityUsageHref) {
  				window.D2L.Siren.EntityStore.fetch(activityUsageHref, this.token, false).then((activityUsage) => {
  					if (activityUsage) {
  						const specializationLink = activityUsage.entity.links.find(link => link.rel.includes(rels.specialization)).href;
  						window.D2L.Siren.EntityStore.fetch(specializationLink, this.token, false).then((quiz) => {
  							this.parentCollectionsName.push(quiz.entity.properties.name);
  							this.requestUpdate();
  						});
  					}
  				});
  			}
  		}
  	}
  };
  
  customHypermediaElement('d2l-activity-list-item-question', componentClass,
  	'd2l-activity-list-item-quiz', [['activity-usage', 'question-version-activity']]);
  