var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, customElement, property, css } from 'lit-element/lit-element.js';
import '@kano/styles/color.js';
import '@kano/styles/typography.js';
import { close } from '@kano/icons/ui.js';
import './kc-part-list-item.js';
import { EventEmitter } from '@kano/common/index.js';
import { templateContent } from '../../lib/directives/template-content.js';
import { add } from './icons.js';
import { styleMap } from 'lit-html/directives/style-map';
import { _ } from '../../lib/i18n/index.js';
let KCPartsControls = class KCPartsControls extends LitElement {
    constructor() {
        super(...arguments);
        this._onDidClickAddParts = new EventEmitter();
        this._onDidClickRemovePart = new EventEmitter();
        this.parts = [];
        this.addPartsHidden = false;
    }
    get onDidClickAddParts() {
        return this._onDidClickAddParts.event;
    }
    get onDidClickRemovePart() {
        return this._onDidClickRemovePart.event;
    }
    static get styles() {
        return css `
            :host {
                display: flex;
                flex: 1;
                flex-direction: column;
                font-family: var(--font-body);
            }
            .add-parts {
                display: flex;
                flex-direction: row;
                align-items: center;
                border-bottom: 1px solid var(--kc-border-color);
            }
            .add-parts label {
                margin: 0;
                cursor: pointer;
            }
            button#add-part-button {
                align-self: flex-end;
                background: rgba(255, 255, 255, 0.25);
                color: rgba(255, 255, 255, 0.75);
                border-radius: 3px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 8px 30px;
                font-size: 12px;
                cursor: pointer;
                width: 100%;
                margin-bottom: 10px;
                border: none;
                font-family: inherit;
            }
            button#add-part-button:hover {
                background: #fd6a21;
            }
            button#add-part-button:hover > label {
                color: white;
            }
            button#add-part-button > .icon {
                width: 20px;
                height: 20px;
                fill: white;
            }
            paper-dialog {
                background: transparent;
            }
            .part-list {
                flex: 1;
                flex-basis: 0.000000001px;
                display: flex;
                flex-direction: column;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
            .part-list::-webkit-scrollbar {
                width: 5px;
            }
            .part-list::-webkit-scrollbar-track,
            .part-list::-webkit-scrollbar-thumb {
                border-radius: 8px;
            }
            .part-list::-webkit-scrollbar-track {
                background: #414A51;
                margin: 9px 0 8px;
            }
            .part-list::-webkit-scrollbar-thumb {
                background: #22272D;
            }
            .part-list::-webkit-scrollbar-thumb:hover {
                cursor: pointer;
            }
            .part {
                flex: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                border-bottom: 1px solid var(--kc-border-color);
                height: 40px;
                color: #fff;
            }
            kc-part-list-item {
                flex: 1;
                flex-basis: 0.000000001px;
                cursor: pointer;
                max-width: 100%;
            }
            .handle {
                cursor: move;
            }
            button.remove {
                background: inherit;
                cursor: pointer;
                line-height: 0;
                border: 0;
                width: 24px;
                height: 24px;
                padding: 6px;
                fill: #8F9195;
                outline: none;
            }
            .remove:hover {
                fill: var(--color-flamingo);
            }
            [hidden] {
                display: none !important;
            }
        `;
    }
    render() {
        return html `
        <div class="add-parts">
            <button id="add-part-button" type="button" @click=${this._addPartClicked} ?hidden=${this.addPartsHidden}>
                <label for="add-part-button">${_('ADD_PARTS_BUTTON', 'Add Parts')}</label>
                <div class="icon">${templateContent(add)}</div>
            </button>
        </div>
        <div class="part-list">
            <slot name="extra-parts"></slot>
            ${this.parts.map(part => html `
            <div class="part" id="part-${part.id}">
                <kc-part-list-item .label=${part.name}
                                   .icon=${part.icon}
                                   .validator=${this._validatePartName.bind(this)}
                                   style=${styleMap({ '--kano-part-list-item-highlight-color': part.color })}
                                   @click=${() => this._partItemTapped(part)}
                                   @label-change=${(e) => this._onNameChange(e, part)}>
                    ${part.inlineDisplay.domNode}
                </kc-part-list-item>
                <button type="button" class="remove" @click=${() => this._removePartClicked(part)}>
                    ${templateContent(close)}
                </button>
            </div>
            `)}
        </div>
`;
    }
    get addPartsButton() {
        return this.renderRoot.querySelector('#add-part-button');
    }
    _addPartClicked() {
        this._onDidClickAddParts.fire();
    }
    _removePartClicked(part) {
        this._onDidClickRemovePart.fire(part.id);
    }
    _removePart(part) {
        this.dispatchEvent(new CustomEvent('remove-part', { detail: part }));
    }
    _partItemTapped(part) {
        this.dispatchEvent(new CustomEvent('part-clicked', { detail: part }));
    }
    getPartNode(id) {
        if (!this.renderRoot) {
            throw new Error('Could not get part DOM node: renderRoot was not set');
        }
        return this.renderRoot.querySelector(`#part-${id}`);
    }
    addEntry(model) {
        const item = model;
        const entry = {
            _onDidChangeName: new EventEmitter(),
            get onDidChangeName() { return this._onDidChangeName.event; },
            update: (model) => {
                item.inlineDisplay.onDispose();
                const index = this.parts.indexOf(item);
                this.parts.splice(index, 1, model);
                this.parts = [...this.parts];
            },
            dispose: () => {
                item.inlineDisplay.onDispose();
                const index = this.parts.indexOf(item);
                this.parts.splice(index, 1);
                this.parts = [...this.parts];
            },
        };
        item.entry = entry;
        this.parts.push(item);
        this.parts = [...this.parts];
        item.inlineDisplay.onInject(item.editor);
        return entry;
    }
    _onNameChange(e, part) {
        part.name = e.detail;
        part.entry._onDidChangeName.fire(e.detail);
    }
    _validatePartName(oldName, newName) {
        const existing = this.parts.find(p => newName !== oldName && p.name === newName);
        if (existing) {
            return 'A part with that name already exist';
        }
        return true;
    }
};
__decorate([
    property({ type: Array })
], KCPartsControls.prototype, "parts", void 0);
__decorate([
    property({ type: Boolean })
], KCPartsControls.prototype, "addPartsHidden", void 0);
KCPartsControls = __decorate([
    customElement('kc-parts-controls')
], KCPartsControls);
export { KCPartsControls };
//# sourceMappingURL=kc-parts-controls.js.map