import {TextInputFieldComponent} from './TextInputField.component.js'
import {Component, Element} from '../../decorators.js'

@Component('ex-input-password')
export class PasswordInputFieldComponent extends TextInputFieldComponent {
    protected static styles = `
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
        </style>
    `

    protected static html = `
        <div class="container">
            <label>
                <span class="label"></span>
                <input class="input" type="password">
                <small class="error"></small>
            </label>
            <label>
                <input class="input confirm" type="password">
            </label>
        </div>
    `

    @Element('input.confirm')
    protected confirmEl!: HTMLInputElement

    render() {
        super.render()

        const hasConfirm = this.hasAttribute('confirmed')
        this.confirmEl.hidden = !hasConfirm

        if ( hasConfirm ) {
            const label = this.label || this.placeholder
            this.confirmEl.setAttribute('placeholder', (label ? label + ' ' : '') + 'Confirmation')
            this.confirmEl.setAttribute('name', (this.name || this.uuid) + '_confirm')
        }

        if ( this.hasAttribute('required') && hasConfirm ) {
            this.confirmEl.setAttribute('required', '1')
        } else {
            this.confirmEl.removeAttribute('required')
        }
    }

    validate(): boolean {
        if ( !super.validate() ) {
            return false
        }

        if ( this.hasAttribute('confirmed') && this.confirmEl.value !== this.getValue() ) {
            this.error = 'Confirmation does not match'
            return false
        }

        return true
    }
}