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

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

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

function Surface(args: React.ComponentProps<typeof MapLocateControl>) {
  const [message, setMessage] = React.useState('Aguardando');

  return (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 520px)', height: 240 }}
    >
      <MapLocateControl
        {...args}
        onLocate={(position, meta) =>
          setMessage(
            `${position.lat.toFixed(5)}, ${position.lng.toFixed(5)} — ±${Math.round(meta.accuracyMeters)} m${meta.mocked ? ' (simulada)' : ''}`
          )
        }
        onError={(status, error) => setMessage(`${status}: ${error ?? 'sem detalhe'}`)}
      />
      <p className="absolute bottom-3 left-3 text-xs text-muted-foreground">{message}</p>
    </div>
  );
}

/** Requests the device position; every failure mode is reported, not swallowed. */
export const Default: Story = {
  args: { onLocate: () => {} },
  render: args => <Surface {...args} />,
};