import { LitElement, html, css, nothing } from 'lit';
import { property, customElement } from 'lit/decorators.js';

@customElement('emerald-counter')
export class EmeraldCounter extends LitElement {
    static styles = css`
        :host {
            display: inline-block;
            aspect-ratio: 1 / 1;
        }

        div#main {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        svg {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        div#counter {
            display: grid;
            justify-content: center;
            align-content: center;
            position: absolute;
            z-index: 1;
            font-family: "Helvetica Neue", "Arial Nova", Helvetica, Arial, sans-serif;
            font-size: 0.25em;
            top: 8%;
            left: 60%;
            width: 30%;
            height: 30%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            border: 0.2em solid white;
            font-weight: bold;
            background: red;
            color: white;
        }

        div#counter span {
            padding-top: 0.28em;
            vertical-align: text-bottom;
        }
    `;
    @property({ type: Number, attribute: "current-count" })
    counter = 0;

    @property({ attribute: "icon-color" })
    color = "#000000";

    render() {
        return html`
            <div id="main">
                <svg
                    id="Layer_1"
                    version="1.1"
                    viewBox="0 0 512 512"
                    xml:space="preserve"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    part="bell"
                >
                    <g>
                        <path
                            style="stroke: ${this.color}; fill: ${this.color}"
                            d="M381.7,225.9c0-97.6-52.5-130.8-101.6-138.2c0-0.5,0.1-1,0.1-1.6c0-12.3-10.9-22.1-24.2-22.1c-13.3,0-23.8,9.8-23.8,22.1   c0,0.6,0,1.1,0.1,1.6c-49.2,7.5-102,40.8-102,138.4c0,113.8-28.3,126-66.3,158h384C410.2,352,381.7,339.7,381.7,225.9z"
                        />
                        <path
                            style="stroke: ${this.color}; fill: ${this.color}"
                            d="M256.2,448c26.8,0,48.8-19.9,51.7-43H204.5C207.3,428.1,229.4,448,256.2,448z"
                        />
                    </g>
                </svg>
                ${!this.counter || this.counter < 1
                    ? nothing
                    : html`<div id="counter" part="counter"><span part="number">${this.counter}</span></div>`}
            </div>
        `;
    }
}