import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';

import { Input } from './inputs/Input';
import { SelectInput, SelectInputOptionContent } from './inputs/SelectInput';
import DateInput from './dateInput';
import PhoneNumberInput from './phoneNumberInput';
import { Field } from './field/Field';
import Checkbox from './checkbox';
import Body from './body';

export default {
  title: 'Forms/Disabled/Tests/Disabled Forms',
  parameters: {
    layout: 'centered',
  },
  tags: ['!manifest'],
} satisfies Meta;

type Story = StoryObj;

export const Disabled: Story = {
  render: () => <DisabledFormShowcaseComponent />,
  tags: ['!autodocs'],
};

function DisabledFormShowcaseComponent() {
  const [selectValue, setSelectValue] = useState<string | undefined>('United Kingdom');
  const [dateValue, setDateValue] = useState<string | null>('11/09/1990');
  const [checkboxValue, setCheckboxValue] = useState(false);

  const countryOptions = [{ value: 'United Kingdom', label: 'United Kingdom' }];

  return (
    <div>
      {/* Country of residence */}
      <div style={{ marginBottom: '32px' }}>
        <Field label="Country of residence">
          <SelectInput
            disabled
            value={selectValue}
            placeholder="Select country"
            items={countryOptions.map((option) => ({
              type: 'option' as const,
              value: option.value,
            }))}
            renderValue={(value) => <SelectInputOptionContent title={value} />}
            onChange={setSelectValue}
          />
        </Field>
      </div>

      {/* Personal details section */}
      <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
        Personal details
      </Body>

      {/* Full legal first and middle name(s) */}
      <div style={{ marginBottom: '24px' }}>
        <Field label="Full legal first and middle name(s)">
          <Input disabled defaultValue="Mickey" placeholder="Enter your first and middle names" />
        </Field>
      </div>

      {/* Full legal last name(s) */}
      <div style={{ marginBottom: '24px' }}>
        <Field label="Full legal last name(s)">
          <Input disabled defaultValue="Mantle" placeholder="Enter your last name" />
        </Field>
      </div>

      {/* Preferred name (optional) */}
      <div style={{ marginBottom: '24px' }}>
        <Field
          label="Preferred name (optional)"
          description="This is how we'll address you in emails and notifications"
        >
          <Input disabled placeholder="Enter your preferred name" />
        </Field>
      </div>

      {/* Date of birth */}
      <div style={{ marginBottom: '24px' }}>
        <Field label="Date of birth">
          <DateInput
            disabled
            value={dateValue || undefined}
            placeholders={{
              day: '11',
              // month: 'September',
              // year: '1990',
            }}
            onChange={setDateValue}
          />
        </Field>
      </div>

      {/* Dynamic flow input */}
      <div className="np-field-control" style={{ marginBottom: '32px' }}>
        <fieldset className="np-input-group">
          <Input disabled value="Fercus" />
        </fieldset>
      </div>

      {/* Phone number */}
      <div style={{ marginBottom: '32px' }}>
        <Field label="Phone number">
          <PhoneNumberInput
            disabled
            initialValue="+4407891300098"
            countryCode="GB"
            onChange={() => {}}
          />
        </Field>
      </div>

      {/* Additional components */}
      <div
        style={{
          borderTop: '1px solid #e5e7eb',
          paddingTop: '32px',
          marginTop: '32px',
        }}
      >
        <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
          Additional Components
        </Body>

        {/* Naked Inputs (without Field wrapper) */}
        <div style={{ marginBottom: '24px' }}>
          <Body style={{ marginBottom: '12px', fontWeight: '500', fontSize: '16px' }}>
            Naked Inputs (without Field wrapper)
          </Body>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <Input disabled placeholder="Disabled input with placeholder" />
            <Input disabled defaultValue="Disabled input with default value" />
            <Input disabled type="email" placeholder="email@example.com" />
            <Input disabled type="password" placeholder="Password input" />
          </div>
        </div>

        {/* Checkbox */}
        <div style={{ marginBottom: '24px' }}>
          <Checkbox
            disabled
            checked={checkboxValue}
            label="I agree to the terms and conditions"
            onChange={(checked) => setCheckboxValue(checked)}
          />
        </div>
      </div>
    </div>
  );
}
