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

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

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

const asClock = (minutes: number) =>
  `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(Math.round(minutes) % 60).padStart(2, '0')}`;

function Controlled(args: React.ComponentProps<typeof MapTimeline>) {
  const [value, setValue] = React.useState(args.range[0]);
  const [playing, setPlaying] = React.useState(false);

  return (
    <div style={{ width: 'min(100vw - 48px, 520px)' }}>
      <MapTimeline
        {...args}
        value={value}
        onChange={setValue}
        playing={playing}
        onPlayingChange={setPlaying}
      />
    </div>
  );
}

/** A window over one afternoon, 17:00 to 23:59. */
export const Default: Story = {
  args: {
    range: [1020, 1439],
    value: 1020,
    onChange: () => {},
    formatValue: asClock,
    label: 'Janela temporal',
    step: 2,
  },
  render: args => <Controlled {...args} />,
};

/** Faster playback for a longer span. */
export const FastPlayback: Story = {
  args: {
    range: [0, 1439],
    value: 0,
    onChange: () => {},
    formatValue: asClock,
    speeds: [1, 4, 12],
    step: 5,
  },
  render: args => <Controlled {...args} />,
};