import {ExComponent} from '../ExComponent.js'
import {Attribute, Component, Element} from '../decorators.js'

@Component('ex-submit')
export class SubmitButtonComponent extends ExComponent {
    protected static styles = `
        <style>
            button {
                display: inline-block;
                padding: 7px 12px;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
            
                background-color: var(--color-accent);
                color: var(--color-text-on-accent);
                border: 1px solid var(--color-accent-darkened);
                cursor: pointer;
                box-sizing: border-box;
                border-radius: 7px;
            
                transition: background-color 0.1s linear;
                width: unset;
                font-size: 1em;
            }

            button:active {
                background-color: var(--color-accent-darkened);
            }

            .container {
                padding: 0 20px;
                text-align: right;
            }
        </style>
    `

    protected static html = `
        <div class="container">
            <button type="submit"></button>
        </div>
    `

    @Attribute()
    public label = 'Submit'

    @Element('button[type=submit]')
    protected buttonEl!: HTMLButtonElement

    mount() {
        super.mount()

        this.buttonEl.addEventListener('click', () => {
            this.dispatchCustom('onSubmit', {})
        })
    }

    render() {
        super.render()

        this.buttonEl.innerText = this.label
    }
}