import type { Meta, StoryObj } from "@storybook/react-vite"
import { CenterTitle, CENTER_TITLE_COMPOSITIONS, type CenterTitleComposition } from "@hm-design/center-graphic"
import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { withRepresentation } from "./center-shared"

// Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
const meta = {
  title: "노선도/Title",
  id: "center-graphic-title",
  component: CenterTitle,
  parameters: { layout: "padded" },
} satisfies Meta<typeof CenterTitle>
export default meta
type Story = StoryObj<typeof meta>

// Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
export const Compositions: Story = {
  name: "Title",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Title" />
      <StorySection title="Overview">
        {withRepresentation(() => <CenterTitleReferenceDemo />)}
      </StorySection>
    </StoryPage>
  ),
}

export const Playground: Story = {
  tags: ["verification"],
  decorators: [withRepresentation],
  args: { composition: "routeProjectNameRoute", context: "서산영덕선", projectName: "대산~당진 건설공사", routeClassification: "고속국도 제30호", projectRoute: "L=25.36km" },
  argTypes: {
    composition: {
      control: { type: "select", labels: Object.fromEntries(Object.entries(CENTER_TITLE_COMPOSITIONS).map(([key, { type, label }]) => [key, `${type} · ${label}`])) },
      options: Object.keys(CENTER_TITLE_COMPOSITIONS) as CenterTitleComposition[],
    },
  },
  render: (args) => <CenterTitle {...args} />,
}