import type { Meta, StoryObj } from '@storybook/react'
import { AlgoliaSearch } from './AlgoliaSearch'

const meta = {
  title: 'Blocks/AlgoliaSearch',
  component: AlgoliaSearch,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    enableSearch: {
      control: 'boolean',
      description: 'Whether to enable the search functionality',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    algoliaAppId: {
      control: 'text',
      description: 'Algolia application ID',
      table: {
        type: { summary: 'string' },
      },
    },
    algoliaPublicApiKey: {
      control: 'text',
      description: 'Algolia public API key',
      table: {
        type: { summary: 'string' },
      },
    },
    baseApiUrl: {
      control: 'text',
      description: 'Base API URL for search requests',
      table: {
        type: { summary: 'string' },
      },
    },
    className: {
      control: 'text',
      description: 'Custom CSS classes for styling',
      table: {
        type: { summary: 'string' },
      },
    },
  },
  args: {
    enableSearch: true,
    algoliaAppId: 'demo-app-id',
    algoliaPublicApiKey: 'demo-api-key',
    baseApiUrl: 'https://api.example.com',
    className: 'mr-2 !h-10 !w-10 md:mr-0 md:!h-auto md:!w-auto',
  },
} satisfies Meta<typeof AlgoliaSearch>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default AlgoliaSearch component with demo configuration.
 *
 * This story shows the search component with demo credentials.
 * In a real application, you would provide actual Algolia credentials.
 */
export const Default: Story = {}

/**
 * AlgoliaSearch in a colored container to test transparency.
 */
export const InBrandBackground: Story = {
  render: (args) => (
    <div
      style={{
        backgroundColor: 'var(--color-brand, #375bd2)',
        padding: 24,
        borderRadius: 12,
        display: 'flex',
        alignItems: 'center',
        minHeight: 120,
      }}
    >
      <AlgoliaSearch {...args} />
    </div>
  ),
  args: {
    ...meta.args,
  },
  parameters: {
    docs: {
      description: {
        story:
          'AlgoliaSearch rendered inside a container with the -brand color background. This demonstrates visual integration and transparency handling.',
      },
    },
  },
}