text: import { bodyCompactStyles, labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
  import { css, html } from 'lit-element/lit-element.js';
  import {DiscoverLocalizationMixin} from './discover-localization-mixin';
  
  export const DiscoverTitleMixin = superclass => class extends DiscoverLocalizationMixin(superclass) {
  	static get styles() {
  		return [bodyCompactStyles, labelStyles, css`
  			.d2l-condition-value {
  				margin-bottom: 0.9rem;
  			}
  		`];
  	}
  
  	getFormattedCardInfo(conditions) {
  		let skipCondition = false;
  
  		return conditions.map((condition, conIndex) => {
  			if (skipCondition) {
  				skipCondition = false;
  				return;
  			}
  
  			if (condition.properties.op === '$in') {
  				return html`
  					<div class="d2l-label-text">${this.getLocalizedAttributeText(condition.properties.id, condition.properties.type)}</div>
  					<div class="d2l-body-compact d2l-condition-value">
  						${condition.properties.values.map((attribute, attIndex) => html`
  							${attribute.name}${attIndex + 1 < condition.properties.values.length ? ', ' : null}
  						`)}
  					</div>
  				`;
  			}
  
  			if (conditions.length <= conIndex + 1 || conditions[conIndex + 1].properties.id !== condition.properties.id) {
  				return html`
  					<div class="d2l-label-text">
  						${this.getLocalizedAttributeText(condition.properties.id, condition.properties.type)}
  						${condition.properties.op === '$lt' ? this.localize('text-date-picker-before') : this.localize('text-date-picker-after')}
  					</div>
  					<div class="d2l-body-compact d2l-condition-value">
  						${condition.properties.values[0].value.replace(/-/g, '/')}
  					</div>
  				`;
  			}
  
  			skipCondition = true;
  			return html`
  				<div class="d2l-label-text">
  					${this.getLocalizedAttributeText(condition.properties.id, condition.properties.type)}
  					${this.localize('text-date-picker-range')}
  				</div>
  				<div class="d2l-body-compact d2l-condition-value">
  					${condition.properties.op === '$lt' ? html`
  						${conditions[conIndex + 1].properties.values[0].value.replace(/-/g, '/')} - ${condition.properties.values[0].value.replace(/-/g, '/')}
  					` : html`
  						${condition.properties.values[0].value.replace(/-/g, '/')} - ${conditions[conIndex + 1].properties.values[0].value.replace(/-/g, '/')}
  					`}
  				</div>
  			`;
  		});
  	}
  };
  