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

@Component('ex-input-email')
export class EmailInputFieldComponent extends TextInputFieldComponent {
    public static validationRex = /^\s*[\w\-+_]+(\.[\w\-+_]+)*@[\w\-+_]+\.[\w\-+_]+(\.[\w\-+_]+)*\s*$/

    protected static html = `
        <label>
            <span class="label"></span>
            <input class="input" type="email">
            <small class="error"></small>
        </label>
    `

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

        if ( !String(this.getValue()).match(EmailInputFieldComponent.validationRex) ) {
            this.error = 'Value must be a valid e-mail address'
            return false
        }

        return true
    }
}