import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapFeatureList } from './map-feature-list';

const FEATURES = [
  {
    id: 'porto-alegre',
    label: 'Porto Alegre',
    description: '874 atendimentos',
    colorToken: '--chart-1' as const,
  },
  {
    id: 'caxias-do-sul',
    label: 'Caxias do Sul',
    description: '412 atendimentos',
    colorToken: '--chart-1' as const,
  },
  {
    id: 'pelotas',
    label: 'Pelotas',
    description: '233 atendimentos',
    colorToken: '--chart-2' as const,
  },
  {
    id: 'canoas',
    label: 'Canoas',
    description: '188 atendimentos',
    colorToken: '--chart-2' as const,
  },
  {
    id: 'gravatai',
    label: 'Gravataí',
    description: '96 atendimentos',
    colorToken: '--chart-3' as const,
  },
];

const meta: Meta<typeof MapFeatureList> = {
  title: 'UI/MapFeatureList',
  component: MapFeatureList,
  parameters: { layout: 'centered' },
};

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

function ControlledList(args: React.ComponentProps<typeof MapFeatureList>) {
  const [selectedId, setSelectedId] = React.useState<string | null>(null);

  return (
    <div style={{ width: 'min(100vw - 48px, 340px)' }}>
      <MapFeatureList {...args} selectedId={selectedId} onSelect={setSelectedId} />
      <p className="mt-3 text-xs text-muted-foreground">
        Tab para entrar na lista, setas para navegar, Enter para selecionar, Esc para limpar.
      </p>
    </div>
  );
}

/** The same content the map shows, operable by keyboard and screen reader. */
export const Default: Story = {
  args: { features: FEATURES, title: 'Municípios', onSelect: () => {} },
  render: args => <ControlledList {...args} />,
};

/**
 * Positions taken from a municipal centroid are labelled as such, so an
 * approximate location is never read as an exact one.
 */
export const DeclaredPrecision: Story = {
  args: {
    title: 'Registros',
    onSelect: () => {},
    features: FEATURES.slice(0, 3).map(feature => ({
      ...feature,
      precision: 'centroid' as const,
      precisionLabel: 'posição no centroide municipal',
    })),
  },
  render: args => <ControlledList {...args} />,
};

/** Scrolls once the list outgrows its container. */
export const Scrollable: Story = {
  args: {
    title: 'Municípios',
    onSelect: () => {},
    maxHeight: '160px',
    features: [...FEATURES, ...FEATURES.map(f => ({ ...f, id: `${f.id}-2` }))],
  },
  render: args => <ControlledList {...args} />,
};

/** Nothing matched the current filter. */
export const Empty: Story = {
  args: { features: [], title: 'Municípios', onSelect: () => {} },
  render: args => <ControlledList {...args} />,
};