import type { Component } from 'solid-js';
import { createSignal } from 'solid-js';
import {
  SSAttrList,
  SSButton,
  SSCallout,
  SSForm,
  SSHeader,
  SSModal,
  SSSurface,
  useSSModals,
} from 'src';
import { IconSpark } from '../../demo/content';

const ModalsPage: Component = () => {
  const modals = useSSModals();
  const [open, setOpen] = createSignal(false);

  return (
    <div class="demo_page">
      <SSHeader title="Modals" subtitle="Inline and managed modal flows." />

      <SSSurface class="demo_surface">
        <div class="demo_inline">
          <SSButton onclick={() => setOpen(true)}>Open modal</SSButton>
          <SSButton
            class="secondary"
            onclick={() =>
              modals.showDefault({
                content: () => (
                  <div class="demo_stack">
                    <strong>Delete pipeline?</strong>
                    <span>This action will remove the pipeline and its history.</span>
                  </div>
                ),
                modalProps: () => ({
                  title: 'Delete confirmation',
                  danger: true,
                  primaryButtonText: 'Delete',
                }),
              })
            }
          >
            Default modal
          </SSButton>
          <SSButton
            class="tertiary"
            onclick={() =>
              modals.showForm({
                content: ({ context }) => (
                  <div class="demo_stack">
                    <SSForm.Input label="Change label" name="label" required />
                    <SSForm.Input label="Summary" name="summary" textArea />
                    <SSForm.Checkbox label="Notify watchers" name="notify" />
                    {context.hasError() && (
                      <span class="demo_hint">Please fix the highlighted fields.</span>
                    )}
                  </div>
                ),
                modalProps: () => ({
                  title: 'Edit release',
                  primaryButtonText: 'Save',
                }),
                onSubmit: async ({ hide }) => {
                  hide();
                },
              })
            }
          >
            Form modal
          </SSButton>
        </div>
      </SSSurface>

      <SSModal
        open={open()}
        title="Launch overview"
        onClose={() => setOpen(false)}
        footer={
          <>
            <SSButton class="secondary" onclick={() => setOpen(false)}>
              Cancel
            </SSButton>
            <SSButton onclick={() => setOpen(false)}>Confirm</SSButton>
          </>
        }
      >
        <div class="demo_stack">
          <SSCallout color="blue" icon={<IconSpark />}>
            Everything is ready to go. Confirm to publish.
          </SSCallout>
          <SSAttrList>
            <SSAttrList.Attr name="Version" value="v1.18.0" />
            <SSAttrList.Attr name="Owner" value="Release team" />
            <SSAttrList.Attr name="Window" value="Tomorrow 09:00 CET" />
          </SSAttrList>
        </div>
      </SSModal>
    </div>
  );
};

export default ModalsPage;