import {ExComponent} from '../ExComponent.js'
import {Attribute, Component, Element} from '../decorators.js'
import {FormComponent} from '../form/Form.component.js'

@Component('ex-page-login')
export class LoginPageComponent extends ExComponent {
    protected static styles = `
        <style>
            :host {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
            }

            .container {
                padding-top: 200px;
                max-width: 500px;
                width: 100%;
            }

            .login-message {
                margin-bottom: 50px;
            }
        </style>
    `

    protected static html = `
        <div class="container">
            <ex-page>
                <h1 class="app-name"></h1>
                <h2 class="login-message"></h2>
                <ex-form>
                    <ex-input name="username" placeholder="Username" required></ex-input>
                    <ex-input-password name="password" placeholder="Password" required></ex-input-password>
                    <ex-submit label="Login"></ex-submit>
                </ex-form>
            </ex-page>
        </div>
    `

    @Attribute()
    public message = 'Login to continue'

    @Attribute()
    public formname = 'login'

    @Element('h1.app-name')
    protected appNameEl!: HTMLHeadingElement

    @Element('h2.login-message')
    protected loginMessageEl!: HTMLHeadingElement

    @Element('ex-form')
    protected formEl!: FormComponent

    render() {
        super.render()

        const name = this.session().get('app.name')
        this.appNameEl.hidden = !name
        this.appNameEl.innerText = name

        this.loginMessageEl.hidden = !this.message
        this.loginMessageEl.innerText = this.message

        this.formEl.setAttribute('name', this.formname)
    }
}