import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapLayerPanel } from './map-layer-panel';
import type { MapDataLayer } from '../map/map-layers-model';

const INITIAL: MapDataLayer[] = [
  {
    id: 'alvo-a',
    label: 'Alvo A',
    group: 'Alvos',
    colorToken: '--chart-1',
    visible: true,
    zIndex: 40,
  },
  {
    id: 'alvo-b',
    label: 'Alvo B',
    group: 'Alvos',
    colorToken: '--chart-3',
    visible: true,
    zIndex: 40,
  },
  {
    id: 'setores',
    label: 'Setores de cobertura',
    group: 'Território',
    colorToken: '--chart-2',
    visible: true,
    zIndex: 20,
  },
  {
    id: 'densidade',
    label: 'Densidade de ocorrências',
    group: 'Território',
    colorToken: '--destructive',
    visible: false,
    zIndex: 10,
  },
];

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

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

function ControlledPanel(args: React.ComponentProps<typeof MapLayerPanel>) {
  const [layers, setLayers] = React.useState(INITIAL);

  const handleToggle = (id: string, visible: boolean) =>
    setLayers(current => current.map(l => (l.id === id ? { ...l, visible } : l)));

  return <MapLayerPanel {...args} layers={layers} onToggle={handleToggle} />;
}

/** Grouped layers, each with a swatch and a switch. */
export const Default: Story = {
  args: { title: 'Camadas', layers: INITIAL, onToggle: () => {} },
  render: args => (
    <div style={{ width: 'min(100vw - 48px, 320px)' }}>
      <ControlledPanel {...args} />
    </div>
  ),
};

/** Floating over a map, inside a `relative` container. */
export const Overlay: Story = {
  args: {
    title: 'Camadas',
    variant: 'overlay',
    position: 'top-right',
    layers: INITIAL,
    onToggle: () => {},
  },
  render: args => (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 640px)', height: 340 }}
    >
      <ControlledPanel {...args} />
    </div>
  ),
};

/** Without groups, the panel is a flat list. */
export const Ungrouped: Story = {
  args: {
    layers: INITIAL.map(({ group: _group, ...rest }) => rest),
    onToggle: () => {},
  },
  render: args => (
    <div style={{ width: 'min(100vw - 48px, 320px)' }}>
      <MapLayerPanel {...args} />
    </div>
  ),
};