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

@Component('ex-button')
export class Button extends ExComponent {
    protected static html = `
        <style>
            .container {
              padding: 8px;
            }
            
            button {
              display: block;
              overflow: hidden;
              position: relative;
              padding: 0 16px;
              font-size: 16px;
              font-weight: bold;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
              outline: none;
            
              width: 100%;
              height: 40px;
            
              box-sizing: border-box;
              border: 1px solid #a1a1a1;
              background: #ffffff;
              box-shadow: 0 2px 4px 0 rgba(0,0,0, 0.05), 0 2px 8px 0 rgba(161,161,161, 0.4);
              color: #363636;
              cursor: pointer;
            }
        </style>
        
        <div class="container">
            <button>Label</button>
        </div>
    `

    @Attribute()
    protected label = 'Label'

    @Element('button')
    protected $button!: HTMLButtonElement

    mount(): void {
        this.$button.addEventListener('click', () => {
            this.dispatchCustom('exClick', {})
        })
    }

    render(): void {
        super.render()
        this.$button.innerText = this.label
    }
}