import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapLegend } from './map-legend';

const meta: Meta<typeof MapLegend> = {
  title: 'UI/MapLegend',
  component: MapLegend,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: { control: 'inline-radio', options: ['inline', 'overlay'] },
    title: { control: 'text' },
  },
  render: args => (
    <div style={{ width: 'min(100vw - 48px, 360px)' }}>
      <MapLegend {...args} />
    </div>
  ),
};

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

/** Categorical color key — one entry per series. */
export const ColorKey: Story = {
  args: {
    title: 'Situação da inspeção',
    items: [
      { colorToken: '--chart-2', label: 'Regular' },
      { colorToken: '--warning', label: 'Pendente de vistoria' },
      { colorToken: '--destructive', label: 'Irregular' },
    ],
  },
};

/**
 * Size key for proportional symbols. Build it from the same `MapScale` object
 * the markers use, or the legend will describe sizes the map never draws.
 */
export const SizeKey: Story = {
  args: {
    title: 'Atendimentos no mês',
    sizeKey: {
      values: [10, 100, 900],
      scale: { value: 0, domain: [0, 900], range: [5, 22], method: 'sqrt' },
      unit: 'un.',
    },
  },
};

/** Both keys at once — the common case for a proportional-symbol map. */
export const ColorAndSizeKeys: Story = {
  args: {
    title: 'Unidades por município',
    items: [
      { colorToken: '--chart-1', label: 'Sede regional' },
      { colorToken: '--chart-3', label: 'Posto avançado' },
    ],
    sizeKey: {
      values: [25, 200, 640],
      scale: { value: 0, domain: [0, 640], range: [6, 24], method: 'sqrt' },
      unit: 'atendimentos',
    },
  },
};

/** Every glyph the color key can draw. */
export const Shapes: Story = {
  args: {
    title: 'Camadas',
    items: [
      { colorToken: '--chart-1', label: 'Ponto de coleta', shape: 'circle' },
      { colorToken: '--chart-2', label: 'Setor censitário', shape: 'square' },
      { colorToken: '--chart-4', label: 'Trecho percorrido', shape: 'line' },
      { colorToken: '--destructive', label: 'Ocorrência', shape: 'pin' },
    ],
  },
};

/**
 * Floating over a map. The overlay variant positions itself absolutely, so it
 * must sit inside a `relative` container together with the map.
 */
export const Overlay: Story = {
  render: args => (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 640px)', height: 320 }}
    >
      <MapLegend {...args} />
    </div>
  ),
  args: {
    variant: 'overlay',
    position: 'bottom-left',
    title: 'Densidade de ocorrências',
    items: [
      { colorToken: '--chart-2', label: 'Baixa' },
      { colorToken: '--chart-3', label: 'Média' },
      { colorToken: '--destructive', label: 'Alta' },
    ],
  },
};