((LitElement) => {
    const html = LitElement.prototype.html;
    const css = LitElement.prototype.css;

    class MultipleEntityRow extends LitElement {

        static get properties() {
            return {
                _hass: {},
                _config: {},
                state: {},
            }
        }

        static get styles() {
            return css`
          :host {
            display: flex;
            align-items: center;
          }
          .flex {
            flex: 1;
            margin-left: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-width: 0;
          }
          .info {
            flex: 1 0 60px;
            cursor: pointer;
          }
          .info, .info > * {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .flex ::slotted(*) {
            margin-left: 8px;
            min-width: 0;
          }
          .flex ::slotted([slot="secondary"]) {
            margin-left: 0;
          }
          .secondary, ha-relative-time {
            display: block;
            color: var(--secondary-text-color);
          }
          state-badge {
            flex: 0 0 40px;
            cursor: pointer;
          }
          .entity {
            margin-right: 16px;
            text-align: center;
            cursor: pointer;
          }
          .entity span {
            font-size: 10px;
            color: var(--secondary-text-color);
          }
          .entity:last-of-type {
            margin-right: 0;
          }
          .state {
            min-width: 45px;
          }
          .toggle {
            margin-left: 8px;
          }
          .icon-small {
            width: auto;
          }`;
        }

        render() {
            return html`
            <state-badge
                .stateObj="${this.state.stateObj}"
                .overrideIcon="${this._config.icon}"
                .stateColor="${this._config.state_color}"
                @click="${this.onRowClick}">
            </state-badge>
            <div class="flex">
                <div class="info" @click="${this.onRowClick}">
                    ${this.state.name}
                    <div class="secondary">${this.renderSecondaryInfo()}</div>
                </div>
                ${this.state.entities.map(entity => this.renderEntity(entity))}
                ${this.state.value ? html`
                <div class="state entity" @click="${this.onStateClick}">
                    ${this.stateHeader && html`<span>${this.stateHeader}</span>`}
                    ${this.renderMainState()}
                </div>` : null}
            </div>`;
        }

        renderMainState() {
            if (this.state.toggle) return html`<div class="toggle">${this.renderToggle(this.state.stateObj)}</div>`;
            else if (this._config.format) return this.renderTimestamp(this.state.value, this._config.format);
            else return html`<div>${this.state.value}</div>`;
        }

        renderSecondaryInfo() {
            return this.lastChanged
                ? html`<ha-relative-time datetime="${this.state.stateObj.last_changed}" .hass="${this._hass}"></ha-relative-time>`
                : this.state.info && this.state.info.format
                    ? this.renderTimestamp(this.state.info.value, this.state.info.format)
                    : (this.state.info && `${this.state.info.name ? `${this.state.info.name} ` : ''}${this.state.info.value}`)
        }

        renderToggle(stateObj) {
            return html`<ha-entity-toggle .stateObj="${stateObj}" .hass="${this._hass}"></ha-entity-toggle>`;
        }

        renderTimestamp(value, format) {
            return !['unknown', 'unavailable'].includes(value.toLowerCase())
                ? html`<hui-timestamp-display .ts=${new Date(value)} .format=${format} .hass=${this._hass}></hui-timestamp-display>`
                : html`${value}`;
        }

        renderIcon(entity) {
            return html`<state-badge class="icon-small" .stateObj="${entity.stateObj}" .overrideIcon="${entity.icon}" .stateColor="${entity.state_color}"></state-badge>`;
        }

        renderEntityValue(entity) {
            if (entity.toggle) return this.renderToggle(entity.stateObj);
            else if (entity.icon) return this.renderIcon(entity);
            else if (entity.format) return this.renderTimestamp(entity.value, entity.format);
            else return html`${entity.value}`;
        }

        renderEntity(entity) {
            return entity ? html`
            <div class="entity" @click="${entity.onClick}">
                <span>${entity.name}</span>
                <div>${this.renderEntityValue(entity)}</div>
            </div>` : null;
        }

        setConfig(config) {
            if (!config.entity) throw new Error('Please define a main entity.');
            if (config.entities) {
                config.entities.map(entity => this.checkEntity(entity));
            }
            this.checkEntity(config.secondary_info);

            this.lastChanged = config.secondary_info === 'last-changed';
            this.stateHeader = config.state_header !== undefined ? config.state_header : null;
            this.onRowClick = (!config.tap_action || config.tap_action.action !== 'none')
                ? this.moreInfoAction(config.tap_action, config.entity)
                : null;
            this.onStateClick = this.getAction(config.tap_action, config.entity);

            this._config = config;
        }

        set hass(hass) {
            this._hass = hass;

            if (hass && this._config) {
                const mainStateObj = hass.states[this._config.entity];

                if (!mainStateObj) throw new Error(`Entity '${this._config.entity}' does not exist.`);

                this.state = {
                    ...this.state,

                    stateObj: mainStateObj,
                    name: this.entityName(this._config.name, mainStateObj),
                    value: this._config.show_state !== false ? this.entityStateValue(mainStateObj, this._config.unit) : null,
                    toggle: this.checkToggle(this._config, mainStateObj),

                    entities: this._config.entities ? this._config.entities.map(entity => this.initEntity(entity, mainStateObj)) : [],
                    info: this.lastChanged ? null :
                        typeof this._config.secondary_info === 'string'
                            ? {value: this._config.secondary_info}
                            : this.initEntity(this._config.secondary_info, mainStateObj),
                }
            }
        }

        checkEntity(config) {
            if (config && typeof config === 'object' && !(config.entity || config.attribute || config.icon)) {
                throw new Error(`Entity object requires at least one 'entity', 'attribute' or 'icon'.`);
            } else if (config && typeof config === 'string' && config === '') {
                throw new Error('Entity ID string must not be blank.');
            } else if (config && typeof config !== 'string' && typeof config !== 'object') {
                throw new Error('Entity config must be a valid entity ID string or entity object.');
            }
        }

        checkToggle(config, stateObj) {
            return config.toggle === true && stateObj.state && !['unknown', 'unavailable'].includes(stateObj.state)
        }

        initEntity(config, mainStateObj) {
            if (!config) return null;

            const entity = typeof config === 'string' ? config : config.entity;
            const stateObj = entity ? (this._hass && this._hass.states[entity]) : mainStateObj;

            if (!stateObj) return {value: this._hass.localize('state.default.unavailable')};

            return {
                stateObj: stateObj,
                name: entity ? this.entityName(config.name, stateObj) : (config.name || null),
                value: config.attribute !== undefined
                    ? this.entityAttribute(stateObj, config.attribute, config.unit)
                    : this.entityStateValue(stateObj, config.unit),
                toggle: this.checkToggle(config, stateObj),
                icon: config.icon === true ? stateObj.attributes.icon : config.icon,
                format: config.format || false,
                state_color: config.state_color || false,
                onClick: this.getAction(config.tap_action, stateObj.entity_id),
            };
        }

        entityName(name, stateObj) {
            if (name === false) return null;
            if (name !== undefined) return name;
            return stateObj.attributes.friendly_name === undefined
                ? stateObj.entity_id.substr(stateObj.entity_id.indexOf('.') + 1).replace(/_/g, ' ')
                : stateObj.attributes.friendly_name || '';
        }

        entityAttribute(stateObj, attribute, unit) {
            return (attribute in stateObj.attributes)
                ? `${stateObj.attributes[attribute]}${unit ? ` ${unit}` : ''}`
                : this._hass.localize('state.default.unavailable');
        }

        entityStateValue(stateObj, unit) {
            let display;
            const domain = stateObj.entity_id.substr(0, stateObj.entity_id.indexOf("."));

            if (domain === 'binary_sensor') {
                if (stateObj.attributes.device_class) {
                    display = this._hass.localize(`state.${domain}.${stateObj.attributes.device_class}.${stateObj.state}`);
                }
                if (!display) {
                    display = this._hass.localize(`state.${domain}.default.${stateObj.state}`);
                }
            } else if (unit !== false && (unit || stateObj.attributes.unit_of_measurement) && !['unknown', 'unavailable'].includes(stateObj.state)) {
                display = `${stateObj.state} ${unit || stateObj.attributes.unit_of_measurement}`;
            } else if (domain === 'zwave') {
                display = ['initializing', 'dead'].includes(stateObj.state)
                    ? this._hass.localize(`state.zwave.query_stage.${stateObj.state}`, 'query_stage', stateObj.attributes.query_stage)
                    : this._hass.localize(`state.zwave.default.${stateObj.state}`);
            } else {
                display = this._hass.localize(`state.${domain}.${stateObj.state}`);
            }

            return display ||
                this._hass.localize(`state.default.${stateObj.state}`) ||
                this._hass.localize(`component.${domain}.state.${stateObj.state}`) ||
                stateObj.state;
        }

        getAction(config, entityId) {
            if (config && config.action) {
                if (config.action === 'none') {
                    return null;
                }
                const confirmation = config.confirmation === true ? 'Are you sure?' : config.confirmation;
                if (config.action === 'call-service') {
                    const [domain, service] = config.service.split(".");
                    return () => {
                        if (!confirmation || confirm(confirmation)) {
                            this._hass.callService(domain, service, config.service_data);
                            this.forwardHaptic('light');
                        }
                    }
                }
                if (config.action === 'toggle') {
                    return () => {
                        if (!confirmation || confirm(confirmation)) {
                            this._hass.callService('homeassistant', 'toggle', {entity_id: entityId});
                            this.forwardHaptic('light');
                        }
                    }
                }
                if (config.action === 'url') {
                    return () => {
                        if (!confirmation || confirm(confirmation)) {
                            const win = window.open(config.url_path, '_blank');
                            if (win) win.focus();
                        }
                    }
                }
            }
            return this.moreInfoAction(config, entityId);
        }

        moreInfoAction(config, entityId) {
            return () => this.fireEvent('hass-more-info', (config && config.entity) || entityId);
        }

        fireEvent(type, entity, options = {}) {
            const event = new Event(type, {
                bubbles: options.bubbles || true,
                cancelable: options.cancelable || true,
                composed: options.composed || true,
            });
            event.detail = {entityId: entity};
            this.dispatchEvent(event);
        }

        forwardHaptic(type) {
            const event = new Event("haptic", {bubbles: true, cancelable: false, composed: true});
            event.detail = type;
            this.dispatchEvent(event);
        }
    }

    customElements.define('multiple-entity-row', MultipleEntityRow);
})(window.LitElement || Object.getPrototypeOf(customElements.get('hui-view')));