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

declare global {
  interface HTMLElementTagNameMap {
    'sdig-contracteditor': ContractEditor;
  }
}

@customElement('sdig-contracteditor')
export class ContractEditor extends DeesElement {
  public static demo = () => html` <sdig-contracteditor
    .contract=${tsIso.demoContract}
  ></sdig-contracteditor> `;

  // INSTANCE
  public localStateInstance = new domtools.plugins.smartstate.Smartstate();
  public contractState =
    this.localStateInstance.getStatePart<plugins.portablecontract.IPortableContract>('contract');

  @property({ type: Object })
  public contract: plugins.portablecontract.IPortableContract;

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    super.firstUpdated(_changedProperties);
    
  }

  public render(): TemplateResult {
    return html` <div class="mainbox"></div> `;
  }
}