import type { Meta, StoryObj } from "@storybook/react-vite"
import { HMRadarChart } from "@hm-design/chart"
import { sampleRadar } from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"

// Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range. Same data and props as the
// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
const meta = {
  title: "Chart/Radar Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Radar: Story = {
  name: "Radar Chart",
  render: () => (
    <StoryPage className={chartPageClass}>
      <StoryPageHeader title="Radar Chart" />
      <ChartSampleNotice />
      {/* Two per row from 1024px, all four in one row from 1600px, one below. */}
      <StorySectionGrid className={chartGrid.quad}>
        <ChartSpecimen title="Basic" description="영역">
          <HMRadarChart {...sampleRadar} label="단계별 처리 수준 방사형 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Dot" description="축별 Dot">
          <HMRadarChart {...sampleRadar} dots label="단계별 처리 수준 방사형 차트, Dot(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Lines Only" description="선만">
          <HMRadarChart {...sampleRadar} filled={false} label="단계별 처리 수준 방사형 차트, 선만(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Custom Label" description="축 Label">
          <HMRadarChart {...sampleRadar} customLabels label="단계별 처리 수준 방사형 차트, 축 Label(예시 데이터)" />
        </ChartSpecimen>
      </StorySectionGrid>
    </StoryPage>
  ),
}