import type { Meta, StoryObj } from '@storybook/react';
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp';
import React, { useState } from 'react';

const meta: Meta<typeof InputOTP> = {
  title: 'UI/InputOTP',
  component: InputOTP,
  render: args => <InputOTP {...args} />,
};

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

export const Default: Story = {
  render: () => {
    const [value, setValue] = useState('');
    return (
      <div className="space-y-4">
        <div className="flex flex-col gap-2">
          <label id="otp-label" className="text-sm font-medium">
            Código de Verificação
          </label>
          <InputOTP
            maxLength={6}
            value={value}
            onChange={value => setValue(value)}
            aria-labelledby="otp-label"
          >
            <InputOTPGroup>
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
            </InputOTPGroup>
            <InputOTPSeparator />
            <InputOTPGroup>
              <InputOTPSlot index={3} />
              <InputOTPSlot index={4} />
              <InputOTPSlot index={5} />
            </InputOTPGroup>
          </InputOTP>
        </div>
        <div className="text-center text-sm">
          {value === '' ? <>Enter your one-time password.</> : <>You entered: {value}</>}
        </div>
      </div>
    );
  },
};

export const FourDigits: Story = {
  render: () => {
    const [value, setValue] = useState('');
    return (
      <InputOTP
        maxLength={4}
        value={value}
        onChange={value => setValue(value)}
        aria-label="Código de verificação de 4 dígitos"
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
      </InputOTP>
    );
  },
};

/**
 * Size comparison: sm, md (default), lg.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-2">
        <p id="otp-sm-label" className="text-sm font-medium">
          Small (sm)
        </p>
        <InputOTP maxLength={4} aria-labelledby="otp-sm-label">
          <InputOTPGroup>
            <InputOTPSlot index={0} size="sm" />
            <InputOTPSlot index={1} size="sm" />
            <InputOTPSlot index={2} size="sm" />
            <InputOTPSlot index={3} size="sm" />
          </InputOTPGroup>
        </InputOTP>
      </div>

      <div className="flex flex-col gap-2">
        <p id="otp-md-label" className="text-sm font-medium">
          Medium (md — default)
        </p>
        <InputOTP maxLength={4} aria-labelledby="otp-md-label">
          <InputOTPGroup>
            <InputOTPSlot index={0} size="md" />
            <InputOTPSlot index={1} size="md" />
            <InputOTPSlot index={2} size="md" />
            <InputOTPSlot index={3} size="md" />
          </InputOTPGroup>
        </InputOTP>
      </div>

      <div className="flex flex-col gap-2">
        <p id="otp-lg-label" className="text-sm font-medium">
          Large (lg)
        </p>
        <InputOTP maxLength={4} aria-labelledby="otp-lg-label">
          <InputOTPGroup>
            <InputOTPSlot index={0} size="lg" />
            <InputOTPSlot index={1} size="lg" />
            <InputOTPSlot index={2} size="lg" />
            <InputOTPSlot index={3} size="lg" />
          </InputOTPGroup>
        </InputOTP>
      </div>
    </div>
  ),
};