import { Select } from "./index";

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

const meta: Meta<typeof Select> = {
  title: "Components/Select",
  component: Select,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A powerful select component built with react-select, featuring search/filtering, custom styling, and enhanced UX that matches the consumer app pattern.",
      },
    },
  },
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["default", "unstyled"],
      description: "Select styling variant",
    },
    size: {
      control: { type: "select" },
      options: ["sm", "md"],
      description: "Select size",
    },
    placeholder: {
      control: { type: "text" },
      description: "Placeholder text",
    },
    isDisabled: {
      control: { type: "boolean" },
      description: "Disable the select",
    },
    hasError: {
      control: { type: "boolean" },
      description: "Show error state",
    },
    error: {
      control: { type: "text" },
      description: "Error message text",
    },
    helperText: {
      control: { type: "text" },
      description: "Helper text",
    },
    label: {
      control: { type: "text" },
      description: "Label text",
    },
    isCustomStyle: {
      control: { type: "boolean" },
      description: "Use custom styling for dropdown indicator and values",
    },
    isSearchable: {
      control: { type: "boolean" },
      description: "Enable search/filtering functionality",
    },
    isClearable: {
      control: { type: "boolean" },
      description: "Allow clearing the selected value",
    },
  },
  args: {
    placeholder: "Select an option...",
    variant: "default",
    size: "md",
    isDisabled: false,
    hasError: false,
    isCustomStyle: false,
    isSearchable: true,
    isClearable: false,
    options: [
      { label: "Option 1", value: "option1" },
      { label: "Option 2", value: "option2" },
      { label: "Option 3", value: "option3" },
    ],
  },
};

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

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

// Select with label
export const WithLabel: Story = {
  render: (args: any) => (
    <div className="space-y-2">
      <Select
        {...args}
        label="Choose an option"
        placeholder="Select an option"
      />
    </div>
  ),
  args: {
    label: "Choose an option",
    placeholder: "Select an option",
  },
};

// Error state
export const Error: Story = {
  args: {
    hasError: true,
    error: "This field is required",
    placeholder: "Invalid selection",
  },
  render: (args: any) => (
    <div className="space-y-2">
      <Select {...args} />
    </div>
  ),
};

// With helper text
export const WithHelperText: Story = {
  args: {
    helperText: "Please select the most appropriate option",
    placeholder: "Select an option",
  },
};

// Small select
export const Small: Story = {
  args: {
    size: "sm",
    placeholder: "Small select",
  },
};

// Medium select
export const Medium: Story = {
  args: {
    size: "md",
    placeholder: "Medium select",
  },
};

// Disabled select
export const Disabled: Story = {
  args: {
    isDisabled: true,
    placeholder: "Disabled select",
  },
};

// Unstyled variant
export const Unstyled: Story = {
  args: {
    variant: "unstyled",
    placeholder: "Unstyled select",
  },
};

// Searchable select
export const Searchable: Story = {
  args: {
    isSearchable: true,
    placeholder: "Type to search...",
    options: [
      { label: "Apple", value: "apple" },
      { label: "Banana", value: "banana" },
      { label: "Cherry", value: "cherry" },
      { label: "Date", value: "date" },
      { label: "Elderberry", value: "elderberry" },
      { label: "Fig", value: "fig" },
      { label: "Grape", value: "grape" },
    ],
  },
};

// Clearable select
export const Clearable: Story = {
  args: {
    isClearable: true,
    placeholder: "Select and clear option",
    value: { label: "Option 2", value: "option2" },
  },
};

// Custom style select
export const CustomStyle: Story = {
  args: {
    isCustomStyle: true,
    placeholder: "Custom styled select",
    options: [
      { label: "Custom Option 1", value: "custom1" },
      { label: "Custom Option 2", value: "custom2" },
      { label: "Custom Option 3", value: "custom3" },
    ],
  },
};

// With filtering options
export const WithFiltering: Story = {
  args: {
    isSearchable: true,
    placeholder: "Search with custom filter...",
    filterOptions: {
      ignoreCase: true,
      ignoreAccents: true,
      matchFrom: "any",
    },
    options: [
      { label: "São Paulo", value: "sao-paulo" },
      { label: "Café", value: "cafe" },
      { label: "Naïve", value: "naive" },
      { label: "Café au lait", value: "cafe-au-lait" },
      { label: "São José", value: "sao-jose" },
    ],
  },
  parameters: {
    docs: {
      description: {
        story:
          "Select with custom filtering options that ignore case and accents for better search experience.",
      },
    },
  },
};

// With many options
export const ManyOptions: Story = {
  args: {
    placeholder: "Choose a country",
    options: [
      { label: "United States", value: "us" },
      { label: "Canada", value: "ca" },
      { label: "United Kingdom", value: "uk" },
      { label: "Germany", value: "de" },
      { label: "France", value: "fr" },
      { label: "Spain", value: "es" },
      { label: "Italy", value: "it" },
      { label: "Japan", value: "jp" },
      { label: "China", value: "cn" },
      { label: "Australia", value: "au" },
      { label: "Brazil", value: "br" },
      { label: "India", value: "in" },
    ],
  },
};

// With selected value
export const WithSelectedValue: Story = {
  args: {
    value: { label: "Option 2", value: "option2" },
    placeholder: "Select an option",
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Default
          </label>
          <Select
            variant="default"
            placeholder="Default select"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Error
          </label>
          <Select
            hasError
            error="This field is required"
            placeholder="Error select"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Small
          </label>
          <Select
            size="sm"
            placeholder="Small select"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Medium
          </label>
          <Select
            size="md"
            placeholder="Medium select"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Disabled
          </label>
          <Select
            isDisabled
            placeholder="Disabled select"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            With Helper Text
          </label>
          <Select
            helperText="Please select an option"
            placeholder="Select with helper"
            options={[
              { label: "Option 1", value: "option1" },
              { label: "Option 2", value: "option2" },
              { label: "Option 3", value: "option3" },
            ]}
          />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all select variants, sizes, and states.",
      },
    },
  },
};

// Form example
export const FormExample: Story = {
  render: () => (
    <form className="space-y-4">
      <div>
        <label className="mb-1 block text-sm font-medium text-gray-700">
          Country *
        </label>
        <Select
          placeholder="Select your country"
          hasError
          error="Country is required"
          options={[
            { label: "United States", value: "us" },
            { label: "Canada", value: "ca" },
            { label: "United Kingdom", value: "uk" },
            { label: "Germany", value: "de" },
            { label: "France", value: "fr" },
          ]}
        />
      </div>
      <div>
        <label className="mb-1 block text-sm font-medium text-gray-700">
          State/Province
        </label>
        <Select
          placeholder="Select your state"
          helperText="Optional field"
          options={[
            { label: "California", value: "ca" },
            { label: "New York", value: "ny" },
            { label: "Texas", value: "tx" },
            { label: "Florida", value: "fl" },
          ]}
        />
      </div>
    </form>
  ),
  parameters: {
    docs: {
      description: {
        story: "Example of select components used in a form context.",
      },
    },
  },
};