import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapViewControl } from './map-view-control';

const views = [
  { id: 'rs', label: 'Estado', center: { lat: -30.03, lng: -51.23 }, zoom: 7 },
  { id: 'metro', label: 'Região metropolitana', center: { lat: -29.99, lng: -51.15 }, zoom: 10 },
  { id: 'capital', label: 'Capital', center: { lat: -30.03, lng: -51.23 }, zoom: 12 },
];

const meta: Meta<typeof MapViewControl> = {
  title: 'UI/MapViewControl',
  component: MapViewControl,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: { control: 'inline-radio', options: ['inline', 'overlay'] },
  },
};

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

function ControlledExample(args: React.ComponentProps<typeof MapViewControl>) {
  const [activeViewId, setActiveViewId] = React.useState('rs');

  return (
    <div style={{ width: 'min(100vw - 48px, 560px)' }}>
      <MapViewControl {...args} activeViewId={activeViewId} onViewChange={setActiveViewId} />
      <p className="mt-3 text-xs text-muted-foreground">
        Camera would move to: <strong>{views.find(v => v.id === activeViewId)?.label}</strong>
      </p>
    </div>
  );
}

/** Switching between named camera positions. */
export const Default: Story = {
  args: { views },
  render: args => <ControlledExample {...args} />,
};

/** With the reframe action, which re-fits the camera around the current data. */
export const WithRefit: Story = {
  args: {
    views,
    onRefit: () => {},
  },
  render: args => <ControlledExample {...args} />,
};

/** Floating over a map, inside a `relative` container. */
export const Overlay: Story = {
  args: {
    views,
    variant: 'overlay',
    position: 'top-left',
    onRefit: () => {},
  },
  render: args => {
    const [activeViewId, setActiveViewId] = React.useState('rs');

    return (
      <div
        className="relative rounded-[var(--radius-card)] border border-border bg-muted"
        style={{ width: 'min(100vw - 48px, 640px)', height: 300 }}
      >
        <MapViewControl {...args} activeViewId={activeViewId} onViewChange={setActiveViewId} />
      </div>
    );
  },
};