import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { withForm } from '../../lib/decorators.js';
import { getDefaultArgTypes, getValidationArgTypes, PrebuiltArgTypes, StorybookControlCategory, } from '../../lib/storybook-arg-types.js';
import { EmailField } from './email-field.js';
const meta = {
    title: 'Scalars/Email Field',
    component: EmailField,
    decorators: [withForm],
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        ...getDefaultArgTypes(),
        ...PrebuiltArgTypes.placeholder,
        ...PrebuiltArgTypes.autoComplete,
        ...getValidationArgTypes({
            enabledArgTypes: {
                validators: false,
            },
        }),
        ...PrebuiltArgTypes.pattern,
        ...PrebuiltArgTypes.minLength,
        ...PrebuiltArgTypes.maxLength,
        ...PrebuiltArgTypes.viewMode,
        ...PrebuiltArgTypes.baseValue,
        allowedDomains: {
            control: 'object',
            description: 'Allowed domains for the email field',
            table: {
                type: { summary: 'string[]' },
                detail: 'Array of allowed domains',
                category: StorybookControlCategory.VALIDATION,
            },
        },
        matchFieldName: {
            control: 'text',
            description: 'Name of another field in the form to validate that this field matches its value. Used for confirmation fields like "Confirm Email" that must match the original field.',
            table: {
                type: { summary: 'string' },
                detail: 'When provided, this field will validate that its value matches the value of the field with the specified name. Common use case: email confirmation fields.',
                category: StorybookControlCategory.VALIDATION,
            },
        },
    },
    args: {
        name: 'email-field',
    },
};
export default meta;
export const Default = {
    args: {
        label: 'Email Input',
        placeholder: 'Enter your email',
    },
};
export const Filled = {
    args: {
        label: 'Email Input',
        placeholder: 'Enter your email',
        value: 'john.doe@example.com',
    },
};
export const WithDifferencesAddition = {
    args: {
        label: 'Number difference addition',
        value: 'test@gmail.com',
        baseValue: 'other@example.com',
        viewMode: 'addition',
    },
};
export const WithDifferencesRemoval = {
    args: {
        label: 'Date difference removal',
        value: 'test@gmail.com',
        baseValue: 'test@example.com',
        viewMode: 'removal',
    },
};
export const WithDifferencesMixed = {
    args: {
        label: 'Date difference mixed',
        value: 'other@example.com',
        baseValue: 'test@example.com',
        viewMode: 'mixed',
    },
};
export const WithEmailMatchForm = {
    parameters: {
        controls: { disable: true },
        docs: {
            source: {
                code: `
<Form defaultValues={{ email: '', confirmEmail: '' }}>
  <EmailField label="Email Address" name="email" placeholder="Enter your email" />
  <EmailField label="Confirm Email" name="confirmEmail" placeholder="Confirm your email" matchFieldName="email" />
  <Button type="submit">Submit</Button>
</Form>
        `,
            },
            description: {
                story: 'Example showing how to use `matchFieldName` prop to create email confirmation fields. The second field validates that it matches the value of the first field.',
            },
        },
    },
    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(EmailField, { label: "Email Address", name: "email", placeholder: "Enter your email" }), _jsx(EmailField, { label: "Confirm Email", name: "confirmEmail", placeholder: "Confirm your email", matchFieldName: "email" })] })),
};
//# sourceMappingURL=email-field.stories.js.map