import type { Meta, StoryObj } from "@storybook/react-vite"
import { HMRadialBarChart, HMRadialMeterChart, HMRadialStackedChart } from "@hm-design/chart"
import { sampleRadial, sampleRadialShape, sampleRadialStacked, sampleRadialText } from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"

// Sample data only. One chart per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
// Same data and props (angles, radii, tracks) as the @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx.
const meta = {
  title: "Chart/Radial Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Radial: Story = {
  name: "Radial Chart",
  render: () => (
    <StoryPage className={chartPageClass}>
      <StoryPageHeader title="Radial Chart" />
      <ChartSampleNotice />
      {/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */}
      <StorySectionGrid className={chartGrid.compact}>
        <ChartSpecimen title="Basic" description="radial-simple · 항목별 막대">
          <HMRadialBarChart {...sampleRadial} label="업무 상태 방사형 막대 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Label" description="radial-label · 막대 안 항목명">
          <HMRadialBarChart {...sampleRadial} labels startAngle={-90} endAngle={380} label="업무 상태 방사형 막대 차트, 항목명 Label(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Grid" description="radial-grid · 원형 Grid">
          <HMRadialBarChart {...sampleRadial} grid label="업무 상태 방사형 막대 차트, Grid(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Text" description="radial-text · 중앙 Text">
          <HMRadialMeterChart {...sampleRadialText} startAngle={0} endAngle={250} innerRadius={75} outerRadius={90} trackRadii={[88.5, 76.5]} cornerRadius={10} label="진행 중 건수 방사형 차트, 중앙 Text(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Shape" description="radial-shape · 링 트랙">
          <HMRadialMeterChart {...sampleRadialShape} startAngle={0} endAngle={100} innerRadius={50} outerRadius={95} trackRadii={[90.5, 54.5]} label="진행 중 건수 방사형 차트, Shape(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Stacked" description="radial-stacked · 반원 누적">
          <HMRadialStackedChart {...sampleRadialStacked} label="업무 상태 방사형 Stacked 차트(예시 데이터)" />
        </ChartSpecimen>
      </StorySectionGrid>
    </StoryPage>
  ),
}