import * as highcharts from 'highcharts';
import { AnimationOptionsObject } from 'highcharts';
import { JSX } from 'solid-js';
import * as highcharts_highcharts_gantt from 'highcharts/highcharts-gantt';
import * as highcharts_highmaps from 'highcharts/highmaps';
import * as highcharts_highstock from 'highcharts/highstock';

/**
 * Represents the core Highcharts module type.
 * This is the standard Highcharts library that provides basic chart functionality.
 *
 * @example
 * ```typescript
 * import Highcharts from 'highcharts';
 * const Chart = createChart(Highcharts);
 * ```
 */
type HighchartsCoreModule = typeof highcharts;
/**
 * Represents the Highcharts Stock module type.
 * This module extends Highcharts with advanced financial charting capabilities.
 *
 * @example
 * ```typescript
 * import Highcharts from 'highcharts/highstock';
 * const StockChart = createStockChart(Highcharts);
 * ```
 */
type HighchartsStockModule = typeof highcharts_highstock;
/**
 * Represents the Highcharts Maps module type.
 * This module provides geographical mapping and visualization capabilities.
 *
 * @example
 * ```typescript
 * import Highcharts from 'highcharts/highmaps';
 * const MapChart = createMapChart(Highcharts);
 * ```
 */
type HighchartsMapModule = typeof highcharts_highmaps;
/**
 * Represents the Highcharts Gantt module type.
 * This module provides project management and timeline visualization capabilities.
 *
 * @example
 * ```typescript
 * import Highcharts from 'highcharts/highcharts-gantt';
 * const GanttChart = createGanttChart(Highcharts);
 * ```
 */
type HighchartsGanttModule = typeof highcharts_highcharts_gantt;

type HighchartOptions = Highcharts.Options & {
    /**
     * Whether to animate the chart updates.
     * If true, the chart will animate the updates.
     * If false, the chart will not animate the updates.
     * If an object, it will be passed to the Highcharts.Animation constructor.
     */
    readonly animation?: boolean | Partial<AnimationOptionsObject>;
};
/**
 * Props for Highcharts chart components.
 * Extends Highcharts.Options with additional SolidJS-specific properties.
 *
 * @example
 * ```tsx
 * const chartProps: HighchartsComponentProps = {
 *   title: { text: 'My Chart' },
 *   series: [{ type: 'line', data: [1, 2, 3] }],
 *   onCreateChart: (chart) => console.log('Chart created:', chart),
 *   class: 'my-chart-container'
 * };
 * ```
 */
type HighchartsComponentProps = HighchartOptions & {
    /** CSS class name to apply to the chart container. */
    readonly class?: string;
    /** CSS styles to apply to the chart container. */
    readonly style?: JSX.CSSProperties;
    /**
     * Ref callback to access the chart container div element.
     * Called with the HTMLDivElement that contains the chart.
     */
    readonly ref?: (container: HTMLDivElement) => void;
    /**
     * Callback function called when the chart is successfully created.
     * Receives the Highcharts chart instance as a parameter.
     */
    readonly onCreateChart?: Highcharts.ChartCallbackFunction;
};
/**
 * The Highcharts component.
 *
 * @param props - The props for the chart component.
 * @returns A JSX element that renders the chart.
 */
type HighchartsComponent = (props: HighchartsComponentProps) => JSX.Element;

/**
 * Creates a SolidJS component for rendering standard Highcharts charts.
 *
 * This is a convenience function that pre-configures `createChartComponent`
 * with the "chart" constructor for standard chart types.
 *
 * @param HighchartsModule - The core Highcharts module
 * @returns A SolidJS component for rendering standard charts
 *
 * @example
 * ```tsx
 * import Highcharts from 'highcharts';
 * import { createChart } from '@dschz/solid-highcharts';
 *
 * const Chart = createChart(Highcharts);
 *
 * function App() {
 *   return (
 *     <Chart
 *       title={{ text: 'Sales Data' }}
 *       series={[{
 *         type: 'line',
 *         name: 'Sales',
 *         data: [29.9, 71.5, 106.4, 129.2]
 *       }]}
 *     />
 *   );
 * }
 * ```
 */
declare const createChart: (HighchartsModule: HighchartsCoreModule) => HighchartsComponent;
/**
 * Creates a SolidJS component for rendering Highcharts Stock charts.
 *
 * This is a convenience function that pre-configures `createChartComponent`
 * with the "stockChart" constructor for financial and time-series data visualization.
 *
 * @param HighchartsModule - The Highcharts Stock module
 * @returns A SolidJS component for rendering stock charts
 *
 * @example
 * ```tsx
 * import Highcharts from 'highcharts/highstock';
 * import { createStockChart } from '@dschz/solid-highcharts';
 *
 * const StockChart = createStockChart(Highcharts);
 *
 * function StockApp() {
 *   return (
 *     <StockChart
 *       title={{ text: 'AAPL Stock Price' }}
 *       series={[{
 *         type: 'candlestick',
 *         name: 'AAPL',
 *         data: ohlcData // [timestamp, open, high, low, close]
 *       }]}
 *       navigator={{ enabled: true }}
 *       scrollbar={{ enabled: true }}
 *     />
 *   );
 * }
 * ```
 */
declare const createStockChart: (HighchartsModule: HighchartsStockModule) => HighchartsComponent;
/**
 * Creates a SolidJS component for rendering Highcharts Maps.
 *
 * This is a convenience function that pre-configures `createChartComponent`
 * with the "mapChart" constructor for geographical data visualization.
 *
 * @param HighchartsModule - The Highcharts Maps module
 * @returns A SolidJS component for rendering map charts
 *
 * @example
 * ```tsx
 * import Highcharts from 'highcharts/highmaps';
 * import worldMap from '@highcharts/map-collection/custom/world.geo.json';
 * import { createMapChart } from '@dschz/solid-highcharts';
 *
 * const MapChart = createMapChart(Highcharts);
 *
 * function MapApp() {
 *   return (
 *     <MapChart
 *       title={{ text: 'World Population Density' }}
 *       mapNavigation={{ enabled: true }}
 *       series={[{
 *         type: 'map',
 *         name: 'Countries',
 *         mapData: worldMap,
 *         data: populationData
 *       }]}
 *     />
 *   );
 * }
 * ```
 */
declare const createMapChart: (HighchartsModule: HighchartsMapModule) => HighchartsComponent;
/**
 * Creates a SolidJS component for rendering Highcharts Gantt charts.
 *
 * This is a convenience function that pre-configures `createChartComponent`
 * with the "ganttChart" constructor for project management and timeline visualization.
 *
 * @param HighchartsModule - The Highcharts Gantt module
 * @returns A SolidJS component for rendering Gantt charts
 *
 * @example
 * ```tsx
 * import Highcharts from 'highcharts/highcharts-gantt';
 * import { createGanttChart } from '@dschz/solid-highcharts';
 *
 * const GanttChart = createGanttChart(Highcharts);
 *
 * function ProjectApp() {
 *   return (
 *     <GanttChart
 *       title={{ text: 'Project Timeline' }}
 *       series={[{
 *         name: 'Project Tasks',
 *         data: [{
 *           name: 'Task 1',
 *           start: Date.UTC(2024, 0, 1),
 *           end: Date.UTC(2024, 0, 15),
 *           completed: 0.5
 *         }, {
 *           name: 'Task 2',
 *           start: Date.UTC(2024, 0, 10),
 *           end: Date.UTC(2024, 0, 25),
 *           dependency: 'Task 1'
 *         }]
 *       }]}
 *     />
 *   );
 * }
 * ```
 */
declare const createGanttChart: (HighchartsModule: HighchartsGanttModule) => HighchartsComponent;

export { type HighchartsComponent, type HighchartsComponentProps, createChart, createGanttChart, createMapChart, createStockChart };