import { allDemos } from './demos';
import type { ComponentVariant, PropDoc } from './types';

// ─── 从 demos.ts 提取 props 文档 ──────────────────────────────────────────────

function getPropsFor(title: string): PropDoc[] {
  return allDemos.find((d) => d.title === title)?.props ?? [];
}

function getVariantsFor(title: string): ComponentVariant[] {
  return allDemos.find((d) => d.title === title)?.variants ?? [];
}

// ─── 每种组件的画布默认配置 ───────────────────────────────────────────────────

export interface CanvasDefault {
  code: string;
  layout: { w: number; h: number; minW?: number; minH?: number };
  props: PropDoc[];
  imports: string;
  variants: ComponentVariant[];
}

export const CANVAS_COMPONENTS: string[] = [
  'NumCard',
  'BarChart',
  'LineChart',
  'PieChart',
  'RadarChart',
  'TreemapChart',
  'Table',
  'WorldMap',
];

export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
  NumCard: {
    code: `<NumCard variant="default" title="指标" value={0} testId="canvas-numcard" />`,
    layout: { w: 10, h: 8, minW: 4, minH: 2 },
    props: getPropsFor('NumCard'),
    variants: getVariantsFor('NumCard'),
    imports: `import { NumCard } from "@gadmin2n/charts";`,
  },

  Filter: {
    code: `<Filter layout="card-grid" columns={2} onSearch={() => {}} testId="canvas-filter"><Form.Item name="keyword"><Input /></Form.Item></Filter>`,
    layout: { w: 48, h: 10, minW: 20, minH: 4 },
    props: getPropsFor('Filter'),
    variants: getVariantsFor('Filter'),
    imports: `import { Filter } from "@gadmin2n/charts";\nimport { Form, Select, Input } from "antd";`,
  },

  BarChart: {
    code: `<MultiChart
  defaultVariant="bar"
  charts={["bar","line","pie"]}
  data={{ xData: ["A", "B", "C", "D"], series: [{ name: "数据", data: [420, 580, 310, 670] }] }}
  showDownload={true}
  height={300}
  testId="canvas-barchart"
/>`,
    layout: { w: 24, h: 20, minW: 8, minH: 8 },
    props: getPropsFor('BarChart'),
    variants: getVariantsFor('BarChart'),
    imports: `import { MultiChart } from "@gadmin2n/charts";`,
  },

  LineChart: {
    code: `<MultiChart
  defaultVariant="line"
  charts={["line","bar","pie"]}
  data={{ xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], series: [{ name: "趋势", data: [65, 72, 78, 85, 82, 91] }] }}
  showDownload={true}
  height={300}
  testId="canvas-linechart"
/>`,
    layout: { w: 24, h: 20, minW: 10, minH: 8 },
    props: getPropsFor('LineChart'),
    variants: getVariantsFor('LineChart'),
    imports: `import { MultiChart } from "@gadmin2n/charts";`,
  },

  PieChart: {
    code: `<MultiChart
  defaultVariant="pie"
  charts={["pie","bar","line"]}
  data={{ xData: ["类目A", "类目B", "类目C", "类目D", "类目E"], series: [{ name: "分布", data: [1245, 876, 234, 189, 156] }] }}
  showDownload={true}
  height={300}
  testId="canvas-piechart"
/>`,
    layout: { w: 24, h: 20, minW: 8, minH: 8 },
    props: getPropsFor('PieChart'),
    variants: getVariantsFor('PieChart'),
    imports: `import { MultiChart } from "@gadmin2n/charts";`,
  },

  RadarChart: {
    code: `<RadarChart indicators={[{ name: "A" }]} series={[{ name: "S", data: [1] }]} height={300} showDownload={true} testId="canvas-radarchart" />`,
    layout: { w: 24, h: 20, minW: 8, minH: 8 },
    props: getPropsFor('RadarChart'),
    variants: getVariantsFor('RadarChart'),
    imports: `import { RadarChart } from "@gadmin2n/charts";`,
  },

  TreemapChart: {
    code: `<TreemapChart data={[{ name: "A", value: 1 }]} height={300} legendShow={true} showDownload={true} testId="canvas-treemap" />`,
    layout: { w: 24, h: 20, minW: 8, minH: 8 },
    props: getPropsFor('TreemapChart'),
    variants: getVariantsFor('TreemapChart'),
    imports: `import { TreemapChart } from "@gadmin2n/charts";`,
  },

  Table: {
    code: `<Table size="small" dataSource={[]} columns={[]} showDownload={true} testId="canvas-table" />`,
    layout: { w: 24, h: 20, minW: 10, minH: 5 },
    props: getPropsFor('Table'),
    variants: getVariantsFor('Table'),
    imports: `import { Table } from "@gadmin2n/charts";`,
  },

  WorldMap: {
    code: `<WorldMap option={{ geo: {}, series: [] }} style={{ height: 400 }} showDownload={true} testId="canvas-worldmap" />`,
    layout: { w: 32, h: 20, minW: 14, minH: 10 },
    props: getPropsFor('WorldMap'),
    variants: getVariantsFor('WorldMap'),
    imports: `import { WorldMap } from "@gadmin2n/charts";`,
  },

  MultiChart: {
    code: `<MultiChart
  showDownload={true}
  height={300}
  testId="canvas-multichart"
/>`,
    layout: { w: 24, h: 20, minW: 8, minH: 8 },
    props: getPropsFor('MultiChart'),
    variants: getVariantsFor('MultiChart'),
    imports: `import { MultiChart } from "@gadmin2n/charts";`,
  },

  Section: {
    code: `<Section title="分组标题" testId="canvas-section" />`,
    layout: { w: 24, h: 14, minW: 8, minH: 4 },
    props: getPropsFor('Section'),
    variants: getVariantsFor('Section'),
    imports: `import { Section } from "@gadmin2n/charts";`,
  },
};
