import type { Meta, StoryObj } from "@storybook/vue3-vite"
import MapPicker from "./MapPicker.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Picker/MapPicker",
  component: MapPicker,
  tags: ["autodocs"],
  args: {
    label: "Location",
  },
  parameters: componentDoc("MapPicker", { barrel: "picker" }),
  decorators: [
    () => ({
      template: '<div class="w-[40rem] max-w-full p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof MapPicker>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Location" },
}

export const WithInitialValue: Story = {
  args: {
    label: "Times Square",
    modelValue: { lat: 40.758, lng: -73.9855 },
    defaultZoom: 15,
  },
}

export const WithErrors: Story = {
  args: {
    label: "Location",
    required: true,
    errors: ["Please select a location"],
  },
}

export const Disabled: Story = {
  args: {
    label: "Location",
    disabled: true,
    modelValue: { lat: 51.505, lng: -0.09 },
    helpText: "Map interaction is disabled in this state.",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { MapPicker },
    template: `
      <div class="flex flex-col gap-6">
        <MapPicker label="Default (London)" />
        <MapPicker
          label="With initial value (Times Square)"
          :model-value="{ lat: 40.758, lng: -73.9855 }"
          :default-zoom="15"
        />
        <MapPicker
          label="With errors"
          required
          :errors="['Please select a location']"
        />
        <MapPicker
          label="Disabled"
          disabled
          :model-value="{ lat: 51.505, lng: -0.09 }"
          help-text="Map interaction is disabled in this state."
        />
      </div>
    `,
  }),
}
