import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapDrawToolbar } from './map-draw-toolbar';
import type { MapDrawMode } from '../map/use-map-drawing';

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

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

function Controlled(args: React.ComponentProps<typeof MapDrawToolbar>) {
  const [active, setActive] = React.useState<MapDrawMode | null>(null);

  return (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 560px)', height: 260 }}
    >
      <MapDrawToolbar {...args} active={active} onChange={setActive} />
      <p className="absolute bottom-3 left-3 text-xs text-muted-foreground">
        Modo: <strong className="text-foreground">{active ?? 'seleção'}</strong>
      </p>
    </div>
  );
}

/** Polygon and circle, plus an explicit idle state. */
export const Default: Story = {
  args: { active: null, onChange: () => {} },
  render: args => <Controlled {...args} />,
};

export const AllModes: Story = {
  args: { active: null, onChange: () => {}, modes: ['polygon', 'circle', 'rectangle'] },
  render: args => <Controlled {...args} />,
};