import type { Meta, StoryObj } from '@storybook/html';
import { Form, type FormOptions, type FormSubmitEvent } from '@42/core/form';
import '@42/styles/form.css';

const snippet = `import { Form } from '@42/core/form';
import '@42/styles/form.css';

const form = new Form(document.querySelector('[data-c42-form]')!, {
  mode: 'blur',
  validators: {
    pwd: (value) => (value.length >= 8 ? null : 'Use at least 8 characters.'),
  },
});

form.on('form:submit', (e) => console.log('valid', e.detail.values));
form.on('form:invalid', (e) => console.log('errors', e.detail.errors));`;

const meta: Meta<FormOptions> = {
  title: 'Core/Inputs & Forms/Form',
  tags: ['autodocs'],
  parameters: {
    docs: { source: { code: snippet, language: 'ts' } },
  },
  argTypes: {
    mode: {
      control: 'inline-radio',
      options: ['submit', 'blur', 'change', 'input'],
    },
  },
  args: {
    mode: 'blur',
  },
  render: (args) => {
    const wrapper = document.createElement('div');
    wrapper.style.maxWidth = '24rem';

    const form = document.createElement('form');
    form.dataset.c42Form = '';
    form.innerHTML = `
      <div data-c42-field>
        <label for="f-email">Email</label>
        <input id="f-email" name="email" type="email" data-c42-validate="required email" />
        <span data-c42-field-error hidden></span>
      </div>
      <div data-c42-field>
        <label for="f-pwd">Password</label>
        <input id="f-pwd" name="pwd" type="password" data-c42-validate="required" data-c42-minlength="8"
               data-c42-error-minlength="Use at least 8 characters." />
        <span data-c42-field-error hidden></span>
      </div>
      <div data-c42-field>
        <label><input type="checkbox" name="tos" value="yes" data-c42-validate="required"
               data-c42-error-required="You must accept the terms." /> I accept the terms</label>
        <span data-c42-field-error hidden></span>
      </div>
      <button type="submit" class="c42-button" data-variant="primary">Sign up</button>`;

    const status = document.createElement('p');
    status.style.fontSize = '0.8125rem';
    status.style.marginBlockStart = '0.75rem';

    const instance = new Form(form, args);
    instance.on<FormSubmitEvent>('form:submit', (e) => {
      status.style.color = 'var(--c42-color-success, #16a34a)';
      status.textContent = `Submitted: ${JSON.stringify(e.detail.values)}`;
    });
    instance.on('form:invalid', () => {
      status.style.color = 'var(--c42-color-danger, #dc2626)';
      status.textContent = 'Please fix the errors above.';
    });

    wrapper.append(form, status);
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<FormOptions>;

export const Default: Story = {};

export const ValidateOnSubmit: Story = {
  args: { mode: 'submit' },
};