import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { TextInput } from '../Inputs/TextInput/TextInput';

import { Field } from './Field';

const meta: Meta<typeof Field> = {
  title: 'UI kit/Form/Field',
  component: Field,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Field>;

export const Default: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Full name</Field.Label>
        <div className='v2FormField__input'>
          <TextInput placeholder='Enter your name' />
        </div>
      </Field>
    </div>
  ),
};

export const Required: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Email address</Field.Label>
        <div className='v2FormField__input'>
          <TextInput placeholder='name@example.com' />
          <Field.HelperText hint='We will never share your email.' />
        </div>
      </Field>
    </div>
  ),
  args: {
    required: true,
  },
};

export const WithHint: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Password</Field.Label>
        <div className='v2FormField__input'>
          <TextInput />
          <Field.HelperText hint='Must be at least 8 characters.' />
        </div>
      </Field>
    </div>
  ),
};

export const WithWarning: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Username</Field.Label>
        <div className='v2FormField__input'>
          <TextInput defaultValue='john_doe_123' />
          <Field.HelperText warning='This username is already taken by an inactive account.' />
        </div>
      </Field>
    </div>
  ),
};

export const WithError: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Email address</Field.Label>
        <div className='v2FormField__input'>
          <TextInput defaultValue='not-an-email' />
          <Field.HelperText error='Please enter a valid email address.' />
        </div>
      </Field>
    </div>
  ),
  args: {
    invalid: true,
  },
};

export const Disabled: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Company name</Field.Label>
        <div className='v2FormField__input'>
          <TextInput defaultValue='Shoptet a.s.' disabled />
        </div>
      </Field>
    </div>
  ),
  args: {
    disabled: true,
  },
};

export const ReadOnly: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Account ID</Field.Label>
        <div className='v2FormField__input'>
          <TextInput defaultValue='ACC-00123456' readOnly />
          <Field.HelperText hint='This value cannot be changed.' />
        </div>
      </Field>
    </div>
  ),
  args: {
    readOnly: true,
  },
};

export const WithTooltip: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>VAT number</Field.Label>
        <div className='v2FormField__input'>
          <TextInput placeholder='CZ12345678' />
        </div>
      </Field>
    </div>
  ),
  args: {
    tooltip: 'The VAT identification number assigned by your tax authority.',
  },
};

export const FullWidth: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label>Description</Field.Label>
        <div className='v2FormField__input'>
          <TextInput placeholder='Enter a description…' style={{ width: '100%' }} />
          <Field.HelperText hint='Briefly describe the item.' />
        </div>
      </Field>
    </div>
  ),
  args: {
    isFullWidth: true,
  },
};

export const Justified: Story = {
  render: args => (
    <div className='v2form'>
      <Field {...args}>
        <Field.Label justify>Description</Field.Label>
        <div className='v2FormField__input'>
          <TextInput placeholder='Enter a description…' style={{ width: '100%' }} />
          <Field.HelperText hint='Briefly describe the item.' />
        </div>
      </Field>
    </div>
  ),
  args: {},
};