import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/input-label.css';

interface LabelArgs {
  text: string;
  required: boolean;
  placeholder: string;
  disabled: boolean;
}

const meta: Meta<LabelArgs> = {
  title: 'Presentational/InputLabel',
  tags: ['autodocs'],
  argTypes: {
    text: { control: 'text' },
    required: { control: 'boolean' },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
  },
  args: { text: 'Email address', required: false, placeholder: 'you@example.com', disabled: false },
  render: ({ text, required, placeholder, disabled }) => {
    const wrapper = document.createElement('div');

    const label = document.createElement('label');
    label.className = 'c42-label';
    label.setAttribute('for', 'demo-input');
    if (required) label.dataset.required = '';
    label.textContent = text;

    const input = document.createElement('input');
    input.id = 'demo-input';
    input.className = 'c42-input';
    input.type = 'email';
    input.placeholder = placeholder;
    input.disabled = disabled;

    wrapper.appendChild(label);
    wrapper.appendChild(input);
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<LabelArgs>;

export const Default: Story = {};
export const Required: Story = { args: { required: true } };
export const Disabled: Story = { args: { disabled: true } };