import { html, domtools } from '@design.estate/dees-element';
import type { DeesForm } from './dees-form.js';

export const demoFunc = () => html`
  <style>
    .demoContainer {
      max-width: 400px;
      margin: auto;
      padding: 16px;
      background: #111;
    }
  </style>
  <div class="demoContainer">
    <dees-form
      style="display: block; margin:auto; max-width: 500px; padding: 20px"
      @formData=${async (eventArg) => {
        const form: DeesForm = eventArg.currentTarget;
        form.setStatus('pending', 'authenticating...');
        await domtools.plugins.smartdelay.delayFor(1000);
        form.setStatus('success', 'authenticated!');
      }}
    >
      <dees-input-dropdown
        .label=${'title'}
        .options=${[
          { option: 'option 1', key: 'option1' },
          { option: 'option 2', key: 'option2' },
          { option: 'option 3', key: 'option3' },
        ]}
      ></dees-input-dropdown>
      <dees-input-multiselect
        .label=${'title'}
        .options=${[
          { option: 'option 1', key: 'option1' },
          { option: 'option 2', key: 'option2' },
          { option: 'option 3', key: 'option3' },
        ]}></dees-input-multiselect>
      <dees-input-typelist></dees-input-typelist>
      <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
      <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
      <dees-input-text
        .required="${true}"
        key="hello3"
        label="a password"
        isPasswordBool
      ></dees-input-text>
      <dees-input-checkbox
        .required="${true}"
        key="hello3"
        label="another text"
      ></dees-input-checkbox>
      <dees-input-iban></dees-input-iban>
      <dees-form-submit>Submit</dees-form-submit>
    </dees-form>
  </div>
`;