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

const meta: Meta<typeof LocationSearchInput> = {
  title: 'Molecules/LocationSearchInput',
  component: LocationSearchInput,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  decorators: [
    (Story) => (
      <Box sx={{ width: 360, p: 2, bgcolor: 'background.default' }}>
        <Story />
      </Box>
    ),
  ],
};

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

// Caller-provided chrome mirroring the ProvidersStep chip strip — useful
// for visualising the molecule in its real context. Users of the molecule
// on other surfaces would pass their own (or none).
const providerChromeSx = {
  '& .MuiOutlinedInput-root': {
    bgcolor: 'background.paper',
    boxShadow: 'var(--fa-shadow-sm)',
    borderRadius: 'var(--fa-button-border-radius-default)',
  },
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'var(--fa-color-neutral-300)',
    borderWidth: 1,
  },
  '& .MuiOutlinedInput-root.Mui-focused': {
    boxShadow: 'var(--fa-shadow-sm)',
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'var(--fa-color-neutral-300)',
      borderWidth: 1,
    },
  },
} as const;

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

/** Empty state — no committed value, no draft. The primary magnifying-glass
 *  stays anchored to the right edge. */
export const Empty: Story = {
  render: (args) => {
    const [value, setValue] = useState('');
    return <LocationSearchInput {...args} value={value} onChange={setValue} />;
  },
  args: { sx: providerChromeSx },
};

/** Committed-chip state — the value renders as a chip with an X to clear. */
export const WithCommittedValue: Story = {
  render: (args) => {
    const [value, setValue] = useState('Wollongong, 2500');
    return <LocationSearchInput {...args} value={value} onChange={setValue} />;
  },
  args: { sx: providerChromeSx },
};

/** Unstyled — no caller chrome. Shows the raw molecule output (just the
 *  correctness CSS kicks in; the rest is MUI defaults). */
export const Unstyled: Story = {
  render: (args) => {
    const [value, setValue] = useState('');
    return <LocationSearchInput {...args} value={value} onChange={setValue} />;
  },
};

/** With onCommit side-effect — logs when the user explicitly commits
 *  (separate from the always-fired onChange). */
export const WithOnCommit: Story = {
  render: (args) => {
    const [value, setValue] = useState('');
    return (
      <LocationSearchInput
        {...args}
        value={value}
        onChange={setValue}
        onCommit={(v) => {
          console.log('committed:', v);
        }}
      />
    );
  },
  args: { sx: providerChromeSx, placeholder: 'Type a suburb and press Enter' },
};
