import { html, TemplateResult } from 'lit';
import '../../../../src/define/ui/ui-text-area.js';
import '../../../../src/define/ui/ui-text-field.js';
import '../../../../src/define/ui/ui-checkbox.js';
import '../../../../src/define/ui/ui-icon.js';
import ApiCheckboxElement from '../../../../src/ui/input/CheckboxElement.js';
import { UiDemoPage } from '../UiDemoPage.js';
import { reactive } from '../../../../src/lib/decorators.js';

class ComponentDemoPage extends UiDemoPage {
  componentName = 'UI text field';

  @reactive() formValues?: string;

  _changeHandler(e: Event): void {
    const button = e.target as ApiCheckboxElement;
    console.log(`Log: ${button.value} checkbox was clicked.`);
  }

  _submitHandler(e: SubmitEvent): void {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const values = Array.from(new FormData(form)) as string[][];
    
    const serialized = new URLSearchParams(values).toString();
    this.formValues = serialized;
  }

  contentTemplate(): TemplateResult {
    const { formValues } = this;

    return html`
    <a href="../">Back</a>

    <form method="get" action="#" @submit="${this._submitHandler}">
    <section class="demo-section">
      <h2 class="title-large">Filled text field</h2>

      <h3 class="title-medium">Regular text field</h3>
      <div class="demo-row">
        <ui-text-field label="Field label"></ui-text-field>  
      </div>

      <h3 class="title-medium">Required text field</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Required label" 
          required
          invalidText="This field is required"></ui-text-field>  
      </div>

      <h3 class="title-medium">Prefix icon</h3>
      <div class="demo-row">
        <ui-text-field label="Search for projects" name="search">
          <ui-icon slot="prefix" icon="search"></ui-icon> 
        </ui-text-field>
      </div>

      <h3 class="title-medium">Suffix icon</h3>
      <div class="demo-row">
        <ui-text-field label="Suffix input" name="suffixed">
          <ui-icon slot="suffix" icon="close"></ui-icon> 
        </ui-text-field>
      </div>

      <h3 class="title-medium">Suffix text</h3>
      <div class="demo-row">
        <ui-text-field label="Your weight" name="weight" required>
          <span slot="suffix">kg</span> 
        </ui-text-field>
      </div>

      <h3 class="title-medium">Hiding label</h3>
      <div class="demo-row">
        <ui-text-field label="No label floating" name="noFloat" noFloating></ui-text-field>
      </div>

      <h3 class="title-medium">Supporting text</h3>
      <div class="demo-row">
        <ui-text-field label="Text field" name="supportingText" supportingText="This is a supporting text with a long value"></ui-text-field>
      </div>

      <h3 class="title-medium">Text counter</h3>
      <div class="demo-row">
        <ui-text-field label="Count text" name="text counter" maxLength="75"></ui-text-field>
      </div>

      <h3 class="title-medium">Disabled input</h3>
      <div class="demo-row">
        <ui-text-field label="Input" value="A value" name="disabled" disabled></ui-text-field>
      </div>

      <h3 class="title-medium">Read only input</h3>
      <div class="demo-row">
        <ui-text-field label="Input" value="A value" name="readonly" readOnly></ui-text-field>
      </div>

      <h3 class="title-medium">Invalid input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Input" 
          value="invalid" 
          name="invalid" 
          minLength="20" 
          invalid 
          invalidText="Minimum 20 characters."></ui-text-field>
      </div>

      <h3 class="title-medium">Color</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select a color" 
          name="color" 
          type="color"></ui-text-field>
      </div>

      <h3 class="title-medium">Date input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select a date" 
          name="date" 
          type="date"></ui-text-field>
      </div>

      <h3 class="title-medium">Datetime input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select a date and time" 
          name="datetime" 
          type="datetime"></ui-text-field>
      </div>

      <h3 class="title-medium">Datetime-local input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select a date and time" 
          name="datetime-local" 
          type="datetime-local"></ui-text-field>
      </div>

      <h3 class="title-medium">Month input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select month" 
          name="month" 
          type="month"></ui-text-field>
      </div>

      <h3 class="title-medium">Week input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select week" 
          name="week" 
          type="week"></ui-text-field>
      </div>

      <h3 class="title-medium">Time input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select time" 
          name="time" 
          type="time"></ui-text-field>
      </div>

      <h3 class="title-medium">Email input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Enter email" 
          name="email" 
          type="email"></ui-text-field>
      </div>

      <h3 class="title-medium">File input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Select file" 
          name="file" 
          type="file"></ui-text-field>
      </div>

      <h3 class="title-medium">Number input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Enter a number" 
          name="number" 
          type="number"
          step="10"
          min="0"
          max="100"></ui-text-field>
      </div>

      <h3 class="title-medium">Tel input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Enter a phone number" 
          name="tel" 
          type="tel"
          ></ui-text-field>
      </div>

      <h3 class="title-medium">URL input</h3>
      <div class="demo-row">
        <ui-text-field 
          label="Enter a url" 
          name="url" 
          type="url"></ui-text-field>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Multiline input</h2>
      <ui-text-area label="Your bio" name="bio" required></ui-text-area>
    </section>


    <section class="demo-section">
      <h2 class="title-large">Inputs in a form</h2>
      <ui-button type="filled" name="submit" value="on" submit>Submit</ui-button>
      ${formValues ? html`
      <output>
        <code><pre>${formValues}</pre></code>
      </output>
      ` : html``}
    </section>
    </form>
    `;
  }
}

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