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

export const demoFunc = () => html`
  <style>
    .demoContainer {
      max-width: 400px;
      margin: 24px auto;
      padding: 16px;
      background: ${cssManager.bdTheme('#eeeeeb', '#111')};
      box-shadow: 0px 1px 3px #00000030;
    }
  </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
        .label=${'a type list'}
      ></dees-input-typelist>
      <dees-input-text .required="${true}" key="hello1" label="a text" .description=${`
        This is an awesome description.
      `}></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-input-multitoggle
        .label=${'multi select'}
        .options=${['option 1', 'option 2', 'option 3']}
        .selectedOption=${'option 1'}
      ></dees-input-multitoggle>
      <dees-input-fileupload
        .label=${'attachments'}
      ></dees-input-fileupload>
      <dees-form-submit>Submit</dees-form-submit>
    </dees-form>
  </div>
`;