import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapBasemapControl } from './map-basemap-control';
import type { MapBasemap } from '../map/map-basemap';

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

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

function Controlled(args: React.ComponentProps<typeof MapBasemapControl>) {
  const [value, setValue] = React.useState<MapBasemap>('roads');

  return (
    <div style={{ width: 'min(100vw - 48px, 620px)' }}>
      <MapBasemapControl {...args} value={value} onChange={setValue} />
      <p className="mt-3 text-xs text-muted-foreground">
        Base ativa: <strong className="text-foreground">{value}</strong>
      </p>
    </div>
  );
}

/** All six base maps. */
export const Default: Story = {
  args: { value: 'roads', onChange: () => {} },
  render: args => <Controlled {...args} />,
};

/**
 * A reduced set. Keep `high-contrast` unless you have a specific reason to drop
 * it — it is the map's accessibility route, not a stylistic extra.
 */
export const Reduced: Story = {
  args: { value: 'roads', onChange: () => {}, options: ['roads', 'high-contrast', 'satellite'] },
  render: args => <Controlled {...args} />,
};