import type { Component } from 'solid-js';
import { createSignal } from 'solid-js';
import {
  SSChip,
  SSDivider,
  SSForm,
  SSHeader,
  SSSurface,
} from 'src';
import { peopleOptions, stackSuggestions, teamOptions } from '../../demo/content';

const FormsPage: Component = () => {
  const [result, setResult] = createSignal<string | null>(null);

  return (
    <div class="demo_page">
      <SSHeader title="Forms" subtitle="Inputs, selections, and validation in one place." />

      <SSSurface class="demo_surface">
        <SSForm
          onsubmit={async (context) => {
            const values = await context.getValues();
            setResult(JSON.stringify(values, null, 2));
          }}
        >
          <div class="demo_form_grid">
            <SSForm.Input label="Project name" name="project" required />
            <SSForm.Input label="Email" name="email" type="email" required />
            <SSForm.Input label="Password" name="password" type="password" required />
            <SSForm.Input label="Contact phone" name="phone" type="tel" />
          </div>

          <SSForm.Input
            label="Message"
            name="message"
            textArea
          />

          <SSForm.Input
            label="Tech stack"
            name="stack"
            suggestions={{
              prepare: () => stackSuggestions,
              getItems: ({ query, init }) =>
                init.filter((item) => item.toLowerCase().includes(query)).slice(0, 5),
              stringify: ({ item }) => item,
            }}
          />

          <div class="demo_form_grid">
            <SSForm.Date label="Start date" name="startDate" editable />
            <SSForm.Date label="Target date" name="targetDate" />
          </div>

          <div class="demo_form_grid">
            <SSForm.Select
              label="Team"
              name="team"
              getOptions={() => teamOptions}
              buildOption={(item) => item.label}
            />
            <SSForm.Checkbox label="Notify stakeholders" name="notify" />
          </div>

          <SSDivider />

          <SSForm.ACSelect
            label="Invite members"
            name="members"
            minSelectedItems={1}
            getOptions={({ query }) =>
              peopleOptions.filter((item) =>
                item.name.toLowerCase().includes(query.toLowerCase())
              )
            }
            renderItem={({ item }) => (
              <div class="demo_ac_item">
                <strong>{item.name}</strong>
                <span>{item.role}</span>
              </div>
            )}
          />

          <SSForm.ACSelect
            label="Primary owner"
            name="owner"
            maxSelectedItems={1}
            getOptions={({ query }) =>
              peopleOptions.filter((item) =>
                item.name.toLowerCase().includes(query.toLowerCase())
              )
            }
            renderItem={({ item }) => (
              <div class="demo_ac_item">
                <strong>{item.name}</strong>
                <span>{item.role}</span>
              </div>
            )}
            renderSelection={({ item }) => (
              <SSChip color="indigo">{item.name}</SSChip>
            )}
          />

          <SSForm.SubmitButton>Save form</SSForm.SubmitButton>
        </SSForm>
      </SSSurface>

      {result() && (
        <SSSurface class="demo_surface">
          <div class="demo_section_title">Submitted values</div>
          <pre class="demo_code">{result()}</pre>
        </SSSurface>
      )}
    </div>
  );
};

export default FormsPage;