import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
import * as plugins from '../plugins.js';

declare global {
  interface HTMLElementTagNameMap {
    'sdig-signbox': SignBox;
  }
}

@customElement('sdig-signbox')
export class SignBox extends DeesElement {
  public static demo = () => html`
    <sdig-signbox></sdig-signbox>
  `;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      .mainbox {
        position: relative;
        background: ${cssManager.bdTheme('#eeeeeb', '#111111')};
        border-radius: 16px;
        max-width: 600px;
        margin: auto;
        overflow: hidden;
        color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
        font-family: 'Roboto', sans-serif;
        box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
      }

      .heading {
        padding: 4px;
        text-align: center;
        font-weight: 500;
        font-size: 12px;
        margin-bottom: -20px;
        pointer-events: none;
      }

      sdig-signpad {
        position: relative;
        z-index: 1;
      }

      .actions {
        position: relative;
        padding: 0px 24px;
        font-size: 16px;
        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
        box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
        z-index: 2;
        display: flex;
        justify-content: flex-end;
      }

      .button {
        cursor: pointer;
        margin: 0px 16px;
        padding: 16px 0px;
        color: ${cssManager.bdTheme('#666', '#999')};
        user-select: none;
      }

      .button:hover {
        color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
      }
    `
  ];

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        <div class="heading">
          You may sign below:
        </div>
        <sdig-signpad></sdig-signpad>
        <div class="actions">
          <div class="button" @click=${async () => {
            await this.shadowRoot.querySelector('sdig-signpad').clear();
          }}>
            Clear
          </div>
          <div class="button" @click=${async () => {
            await this.shadowRoot.querySelector('sdig-signpad').undo();
          }}>
            Undo
          </div>
          <div class="button" @click=${async () => {
            const signature = await this.shadowRoot.querySelector('sdig-signpad').toData();
            this.dispatchEvent(new CustomEvent('signature', {
              detail: {
                signature,
              }
            }));
            console.log(signature);
          }}>
            Submit Signature
          </div>
        </div>
      </div>
    `;
  }
}