import React from 'react';
import { Affix } from '../affix/react';
import { TextField } from './react';
const locale = 'nb';
const getNumberFormatter = (locale, opts = {}) => {
    return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
};
export default {
    title: 'Forms/Textfield',
    render(args) {
        return React.createElement(TextField, { ...args });
    },
    component: TextField,
};
export const Default = {
    args: {
        label: 'Email',
        type: 'email',
    },
};
export const WithPlaceholder = {
    args: {
        label: 'Email',
        placeholder: 'user@example.com',
        type: 'email',
    },
};
export const WithHelpText = {
    args: {
        label: 'Password',
        helpText: 'Must be at least 8 characters',
        type: 'password',
    },
};
export const Invalid = {
    args: {
        label: 'Email',
        invalid: true,
        helpText: 'Please enter a valid email address',
        value: 'invalid-email',
        type: 'email',
    },
};
export const Disabled = {
    args: {
        label: 'Email',
        disabled: true,
        value: 'user@example.com',
        type: 'email',
    },
};
export const ReadOnly = {
    args: {
        label: 'Email',
        readOnly: true,
        value: 'user@example.com',
        type: 'email',
    },
};
export const Required = {
    args: {
        label: 'Email',
        required: true,
        type: 'email',
    },
};
export const WithAffix = {
    args: {
        label: 'Price',
        placeholder: '1 000 000',
        type: 'text',
    },
    render(args) {
        return (React.createElement(TextField, { ...args },
            React.createElement(Affix, { slot: "suffix", label: "kr" })));
    },
};
export const Masking = {
    args: {
        label: 'Price',
        placeholder: '1 000 000',
        type: 'text',
    },
    render({ ...args }) {
        return (React.createElement(TextField, { ...args, formatter: getNumberFormatter(locale) },
            React.createElement(Affix, { slot: "suffix", label: "kr" })));
    },
};
