import { html, TemplateResult } from 'lit';
import '../../../../src/define/ui/ui-icon-button.js';
import { UiDemoPage } from '../UiDemoPage.js';
import * as Icons from '../../../../src/ui/icons/Icons.js';
import IconButtonElement from '../../../../src/ui/button/UiIconButton.js';

class ComponentDemoPage extends UiDemoPage {
  componentName = 'API icon button';

  _clickHandler(e: Event): void {
    const button = e.target as IconButtonElement;
    console.log(`A ${button.type} button was clicked.`);
  }

  _activeHandler(e: Event): void {
    const button = e.target as IconButtonElement;
    console.log(`A ${button.type} button was ${button.active ? 'activated' : 'deactivated'}`);
  }

  contentTemplate(): TemplateResult {
    return html`
    <a href="../">Back</a>
    <section class="demo-section">
      <h2 class="title-large">Filled icon button</h2>
      <div class="demo-row icons-demo-row">

        <ui-icon-button type="filled" @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: standard filled button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="filled" toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: toggle filled button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="filled" toggle active @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: toggle, active filled button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="filled" disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: disabled filled button">${Icons.settings}</ui-icon-button>

        <p class="label-large">No toggle</p>
        <p class="label-large">Toggle (unselected)</p>
        <p class="label-large">Toggle (selected)</p>
        <p class="label-large">Disabled</p>
      </div>
    </section>
    
    <section class="demo-section">
      <h2 class="title-large">Filled tonal icon button</h2>
      <div class="demo-row icons-demo-row">
        <ui-icon-button type="tonal" @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: standard tonal button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="tonal" toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: toggle tonal button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="tonal" active toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: toggle, active tonal button">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="tonal" disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-label="Settings: disabled tonal button">${Icons.settings}</ui-icon-button>

        <p class="label-large">No toggle</p>
        <p class="label-large">Toggle (unselected)</p>
        <p class="label-large">Toggle (selected)</p>
        <p class="label-large">Disabled</p>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Outlined icon button</h2>
      <div class="demo-row icons-demo-row">
        <ui-icon-button type="outlined" @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="iont">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="outlined" toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="iotu">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="outlined" active toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="iots">${Icons.settings}</ui-icon-button>
        <ui-icon-button type="outlined" disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="iod">${Icons.settings}</ui-icon-button>

        <p class="label-large" id="iont">No toggle</p>
        <p class="label-large" id="iotu">Toggle (unselected)</p>
        <p class="label-large" id="iots">Toggle (selected)</p>
        <p class="label-large" id="iod">Disabled</p>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Standard icon button</h2>
      <div class="demo-row icons-demo-row">
        <ui-icon-button @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isnt">${Icons.settings}</ui-icon-button>
        <ui-icon-button toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="istu">${Icons.settings}</ui-icon-button>
        <ui-icon-button toggle active @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="ists">${Icons.settings}</ui-icon-button>
        <ui-icon-button disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isd">${Icons.settings}</ui-icon-button>

        <p class="label-large" id="isnt">No toggle</p>
        <p class="label-large" id="istu">Toggle (unselected)</p>
        <p class="label-large" id="ists">Toggle (selected)</p>
        <p class="label-large" id="isd">Disabled</p>
      </div>
    </section>
    `;
  }
}

const instance = new ComponentDemoPage();
instance.render();
