import type { Meta, StoryObj } from "@storybook/react-vite"
import { HMLineChart } from "@hm-design/chart"
import { sampleLineCompare, sampleLinePointColors } 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 six charts share one data set and axis range, so connection styles compare directly: curve, straight
// and step, each as a plain line and with Dots and value labels. Same data and props as the @hm-design/chart/examples cards;
// open layout (no card): see chart-story.tsx.
const meta = {
  title: "Chart/Line Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Line: Story = {
  name: "Line Chart",
  render: () => (
    <StoryPage className={chartPageClass}>
      <StoryPageHeader title="Line Chart" />
      <ChartSampleNotice />
      {/* Source order is the mobile order. 1024px: Curve | Curve + labels per row. 1200px: three columns, plain styles in the
          first row and their Dot + Label versions below. */}
      <StorySectionGrid className={chartGrid.pairs}>
        <ChartSpecimen title="Curve">
          <HMLineChart {...sampleLineCompare} curve="monotone" dots={false} label="월별 접수·완료 곡선형 선 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Curve · Dot + Label">
          <HMLineChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 라벨 선 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Straight">
          <HMLineChart {...sampleLineCompare} curve="linear" dots={false} label="월별 접수·완료 직선형 선 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Straight · Color Dot + Label">
          <HMLineChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 선 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Step">
          <HMLineChart {...sampleLineCompare} curve="step" dots={false} label="월별 접수·완료 계단형 선 차트(예시 데이터)" />
        </ChartSpecimen>
        <ChartSpecimen title="Step · Dot + Label">
          <HMLineChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 라벨 선 차트(예시 데이터)" />
        </ChartSpecimen>
      </StorySectionGrid>
    </StoryPage>
  ),
}