import { Input } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Input> = {
  title: "Components/Input",
  component: Input,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A comprehensive input component with support for labels, error states, icons, loading states, and multiple sizes.",
      },
    },
  },
  argTypes: {
    placeholder: {
      control: { type: "text" },
      description: "Placeholder text",
    },
    label: {
      control: { type: "text" },
      description: "Label text",
    },
    size: {
      control: { type: "select" },
      options: ["slim", "medium", "large"],
      description: "Input size",
    },
    state: {
      control: { type: "select" },
      options: ["default", "focus", "active", "hover", "filled", "error"],
      description: "Visual state",
    },
    hasError: {
      control: { type: "boolean" },
      description: "Show error state",
    },
    errorText: {
      control: { type: "text" },
      description: "Error message text",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the input",
    },
    loading: {
      control: { type: "boolean" },
      description: "Show loading state",
    },
    required: {
      control: { type: "boolean" },
      description: "Mark input as required",
    },
    type: {
      control: { type: "select" },
      options: ["text", "email", "password", "number", "tel"],
      description: "Input type",
    },
    prefixIconName: {
      control: { type: "select" },
      options: ["location_on", "search"],
      description: "Prefix icon name",
    },
    suffixIconName: {
      control: { type: "select" },
      options: ["visibility", "visibility_off", "lock"],
      description: "Suffix icon name",
    },
  },
  args: {
    placeholder: "Enter text...",
    size: "medium",
  },
};

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

// Default input
export const Default: Story = {
  args: {},
};

// With label
export const WithLabel: Story = {
  args: {
    label: "Email Address",
    placeholder: "Enter your email",
  },
};

// Required input
export const Required: Story = {
  args: {
    label: "Required Field",
    placeholder: "This field is required",
    required: true,
  },
};

// Error state
export const Error: Story = {
  args: {
    label: "Email Address",
    placeholder: "Enter your email",
    hasError: true,
    errorText: "Please enter a valid email address",
  },
};

// Different sizes
export const Sizes: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <div>
        <Input size="slim" placeholder="Slim input" label="Slim Size" />
      </div>
      <div>
        <Input size="medium" placeholder="Medium input" label="Medium Size" />
      </div>
      <div>
        <Input size="large" placeholder="Large input" label="Large Size" />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All available input sizes: slim, medium, and large.",
      },
    },
  },
};

// With prefix icon
export const WithPrefixIcon: Story = {
  args: {
    label: "Search",
    placeholder: "Search...",
    prefixIconName: "search",
    prefixIconSize: 24,
  },
};

// With suffix icon
export const WithSuffixIcon: Story = {
  args: {
    label: "Password",
    placeholder: "Enter password",
    type: "password",
    suffixIconName: "visibility",
    suffixIconSize: 24,
  },
};

// Password input
export const Password: Story = {
  args: {
    label: "Password",
    placeholder: "Enter your password",
    type: "password",
    suffixIconName: "visibility",
  },
};

// Loading state
export const Loading: Story = {
  args: {
    label: "Loading Input",
    placeholder: "Loading...",
    loading: true,
  },
};

// Disabled state
export const Disabled: Story = {
  args: {
    label: "Disabled Input",
    placeholder: "This input is disabled",
    disabled: true,
  },
};

// Different states
export const States: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <div>
        <Input
          label="Default State"
          placeholder="Default input"
          state="default"
        />
      </div>
      <div>
        <Input label="Hover State" placeholder="Hover over me" state="hover" />
      </div>
      <div>
        <Input label="Focus State" placeholder="Focus on me" state="focus" />
      </div>
      <div>
        <Input
          label="Error State"
          placeholder="Error input"
          state="error"
          errorText="This field has an error"
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Different visual states of the input component.",
      },
    },
  },
};

// Email input
export const Email: Story = {
  args: {
    label: "Email",
    placeholder: "example@email.com",
    type: "email",
  },
};

// Phone input
export const Phone: Story = {
  args: {
    label: "Phone Number",
    placeholder: "(555) 123-4567",
    type: "tel",
  },
};

// Form example
export const FormExample: Story = {
  render: () => (
    <form className="max-w-md w-full space-y-4">
      <Input label="First Name" placeholder="Enter your first name" required />
      <Input label="Last Name" placeholder="Enter your last name" required />
      <Input
        label="Email"
        placeholder="Enter your email"
        type="email"
        required
      />
      <Input
        label="Password"
        placeholder="Enter your password"
        type="password"
        suffixIconName="visibility"
        required
      />
      <Input label="Phone Number" placeholder="(555) 123-4567" type="tel" />
    </form>
  ),
  parameters: {
    docs: {
      description: {
        story: "Example of multiple inputs used together in a form.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Sizes</h3>
        <div className="space-y-3">
          <Input size="slim" placeholder="Slim" label="Slim" />
          <Input size="medium" placeholder="Medium" label="Medium" />
          <Input size="large" placeholder="Large" label="Large" />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Icons</h3>
        <div className="space-y-3">
          <Input
            placeholder="Search..."
            label="With Prefix Icon"
            prefixIconName="search"
          />
          <Input
            placeholder="Password"
            label="With Suffix Icon"
            type="password"
            suffixIconName="visibility"
          />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">States</h3>
        <div className="space-y-3">
          <Input placeholder="Default" label="Default" />
          <Input
            placeholder="Error"
            label="Error"
            hasError
            errorText="This field has an error"
          />
          <Input placeholder="Loading" label="Loading" loading />
          <Input placeholder="Disabled" label="Disabled" disabled />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Complete showcase of all input variants, sizes, and states.",
      },
    },
  },
};