import { html, css, LitElement, PropertyValues } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
import { InputData } from './definition-schema.js'

type Theme = {
    theme_name: string
    theme_object: any
}

@customElement('widget-label-versionplaceholder')
export class WidgetLabel extends LitElement {
    @property({ type: Object })
    inputData?: InputData

    @property({ type: Object })
    theme?: Theme

    @state() private themeBgColor?: string
    @state() private themeTextColor?: string

    version: string = 'versionplaceholder'

    update(changedProperties: PropertyValues) {
        if (changedProperties.has('theme')) {
            this.registerTheme(this.theme)
        }
        super.update(changedProperties)
    }

    protected firstUpdated(_changedProperties: PropertyValues): void {
        this.registerTheme(this.theme)
    }

    registerTheme(theme?: Theme) {
        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
        this.themeBgColor = cssBgColor || theme?.theme_object?.backgroundColor
        this.themeTextColor = cssTextColor || theme?.theme_object?.title?.textStyle?.color
    }

    static styles = css`
        :host {
            display: block;
            font-family: sans-serif;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }

        .wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 4px;
            overflow: hidden;
        }

        .label {
            width: 100%;
            white-space: pre-wrap;
            word-break: break-word;
        }
    `

    private justifyContent(): string {
        switch (this.inputData?.verticalAlign) {
            case 'top':
                return 'flex-start'
            case 'bottom':
                return 'flex-end'
            case 'center':
            default:
                return 'center'
        }
    }

    render() {
        const fontSize = this.inputData?.fontSize ?? 16
        const fontColor = this.inputData?.fontColor || this.themeTextColor || 'inherit'
        const fontWeight = this.inputData?.fontWeight ?? 'normal'
        const fontStyle = this.inputData?.fontStyle ?? 'normal'
        const textAlign = this.inputData?.textAlign ?? 'left'
        const backgroundColor = this.inputData?.backgroundColor || this.themeBgColor || 'transparent'

        return html`
            <div
                class="wrapper"
                style="
                    background-color: ${backgroundColor};
                    justify-content: ${textAlign === 'center'
                    ? 'center'
                    : textAlign === 'right'
                      ? 'flex-end'
                      : 'flex-start'};
                    align-items: ${this.justifyContent()};
                "
            >
                <div
                    class="label"
                    style="
                        font-size: ${fontSize}px;
                        color: ${fontColor};
                        font-weight: ${fontWeight};
                        font-style: ${fontStyle};
                        text-align: ${textAlign};
                    "
                >${this.inputData?.text ?? ''}</div>
            </div>
        `
    }
}