import type { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';
import Box from '@mui/material/Box';
import { SortMenu } from './SortMenu';

const meta: Meta<typeof SortMenu> = {
  title: 'Molecules/SortMenu',
  component: SortMenu,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  decorators: [
    (Story) => (
      <Box sx={{ p: 4 }}>
        <Story />
      </Box>
    ),
  ],
};

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

const providerSortOptions = [
  { value: 'recommended', label: 'Recommended' },
  { value: 'nearest', label: 'Nearest' },
  { value: 'price_low', label: 'Price low to high' },
  { value: 'price_high', label: 'Price high to low' },
];

// Caller-provided chrome mirroring ProvidersStep's chip strip.
const controlChromeSx = {
  height: 32,
  bgcolor: 'background.paper',
  borderColor: 'var(--fa-color-neutral-300)',
  borderRadius: 'var(--fa-button-border-radius-default)',
  boxShadow: 'var(--fa-shadow-sm)',
  textTransform: 'none',
  '&:hover': {
    bgcolor: 'background.paper',
    borderColor: 'var(--fa-color-neutral-300)',
  },
  '&:focus-visible': { outline: 'none' },
} as const;

// ─── Stories ────────────────────────────────────────────────────────────────

/** Compact variant — the trigger reads "Sort by" regardless of current
 *  value. Current value surfaces in the menu's selected state. Best for
 *  narrow layouts (mobile). */
export const Compact: Story = {
  render: (args) => {
    const [value, setValue] = useState('recommended');
    return <SortMenu {...args} value={value} onChange={setValue} />;
  },
  args: {
    options: providerSortOptions,
    variant: 'compact',
    sx: controlChromeSx,
  },
};

/** Verbose variant — trigger reads "Sort: <current label>" with a
 *  swap-vertical icon. Best for desktop where horizontal space is cheap. */
export const Verbose: Story = {
  render: (args) => {
    const [value, setValue] = useState('price_low');
    return <SortMenu {...args} value={value} onChange={setValue} />;
  },
  args: {
    options: providerSortOptions,
    variant: 'verbose',
    sx: controlChromeSx,
  },
};

/** No chrome — raw output. Useful for checking the molecule's default
 *  Button atom appearance before any caller sx. */
export const Bare: Story = {
  render: (args) => {
    const [value, setValue] = useState('recommended');
    return <SortMenu {...args} value={value} onChange={setValue} />;
  },
  args: {
    options: providerSortOptions,
    variant: 'compact',
  },
};

/** Smaller option set — demonstrating that the component adapts to any
 *  options array, not just the provider-sort defaults. */
export const TwoOptions: Story = {
  render: (args) => {
    const [value, setValue] = useState('newest');
    return <SortMenu {...args} value={value} onChange={setValue} />;
  },
  args: {
    options: [
      { value: 'newest', label: 'Newest first' },
      { value: 'oldest', label: 'Oldest first' },
    ],
    variant: 'verbose',
    sx: controlChromeSx,
  },
};
