import { LitElement, html, css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { LinkIcon } from './icons';

export class MenuSubItem extends LitElement {
    @property({ attribute: 'label' })
    label: string;

    @property({ attribute: 'icon-url' })
    iconUrl: string;

    @property({ attribute: 'link-url' })
    linkUrl: string;

    @property({ attribute: 'inactive', type: Boolean })
    inactive: boolean;

    static styles = css`
    :host {
        display: block;
        flex: 1;
        cursor: pointer;
        transition: all 100ms ease-out;
        border-bottom: 1px solid rgb(229,231,235);
        padding: 5px 0 5px 7px;
        border-left: 5px solid transparent;
    }
    :host([inactive]) {
        cursor: initial;
    }
    :host(:hover) {
        border-left: 5px solid #03A9F4;
        background-color: rgb(28 169 247 / 10%);
    }
    a {
        font-size: 20px;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: 40px;
        color: black;
    }
    .edge-menu-sub-item-icon {
        height: 25px;
        width: 25px;
    }
    .edge-menu-sub-item-label {
        margin-left: 5px;
    }
    `;

    render() {
        return html`
            <a href="${this.linkUrl ? this.linkUrl : '#'}">
            <img class="edge-menu-sub-item-icon" src="${this.iconUrl ? this.iconUrl : LinkIcon}" />
                <span class="edge-menu-sub-item-label">${this.label}</span>
            </a>
        `
    }
}