import { ChartModuleSelection } from '../common/selection';
import { BaseType, Selection } from 'd3-selection';
import { AxisTimeCombination } from '../helpers/constants';
import { LocalObject } from '../common/local';

export enum tooltipKeys {
    Date = 'date',
    Topics = 'topics',
}

export type TooltipTopic = {
    date: string;
    name: string;
    value: number;
    topicName: string;
};

// This is equivalent to the LineChartDataSorted data type in Britecharts
export type TooltipListDataShape = {
    [tooltipKeys.Date]: string;
    [tooltipKeys.Topics]: TooltipTopic[];
};

/** What the single-value charts (bar, scatter plot, heatmap, donut) dispatch */
export type TooltipSingleDataShape = {
    name: string;
    value: number;
};

export type TooltipDataShape = TooltipListDataShape | TooltipSingleDataShape;

/** [x, y] in pixels, relative to the chart's drawing area */
export type TooltipPosition = [number, number];

/** [width, height] of the chart in pixels; accepted and ignored */
export type TooltipChartSize = [number, number];

export type TooltipLayout = 'auto' | 'list' | 'single';

export type TooltipSelection = Selection<
    BaseType,
    TooltipDataShape[],
    HTMLElement,
    any
>;

export type TooltipOffset = {
    x: number;
    y: number;
};

export type TopicColorMap = Record<string, string>;

type TooltipFormattingFunction = (value: number) => number;

export interface TooltipAPI {
    /** Hides the tooltip */
    hide(): void;
    /**
     * Shows the tooltip. Given the hovered data point and its position, as the
     * single-value charts dispatch them on `customMouseOver`, it renders and
     * places the tooltip at once; otherwise it shows empty until the first update.
     */
    show(dataPoint?: TooltipDataShape, position?: TooltipPosition): void;
    /**
     * Gets or Sets the layout: 'list' (title and one row per topic), 'single'
     * (title, name and a big value; what miniTooltip renders) or 'auto' (the
     * default: by the data point's shape). Set before the tooltip is drawn.
     */
    layout(layout?: TooltipLayout): TooltipModule;
    /**
     * Constants to be used to force the x axis to respect a certain granularity
     * current options: HOUR_DAY, DAY_MONTH, MONTH_YEAR
     * */
    axisTimeCombinations: {
        [key in keyof typeof AxisTimeCombination]: AxisTimeCombination | string;
    };
    /** Exposes the ability to force the tooltip to use a certain date format */
    dateFormat(format?: string): TooltipModule;
    /** Exposes the ability to use a custom date format */
    dateCustomFormat(format?: string): TooltipModule;
    /** Gets or Sets the dateLabel of the data */
    dateLabel(label?: string): TooltipModule;
    /** Pass locale for the tooltip to render the date in */
    locale(localObject?: LocalObject | null): TooltipModule;
    /** Gets or Sets the nameLabel of the data */
    nameLabel(label?: string): TooltipModule;
    /** Gets or Sets the number format for the value displayed on the tooltip */
    numberFormat(format?: string): TooltipModule;
    /**
     * Gets or Sets the formatter function for the value displayed on the tooltip.
     * Setting this property makes the tooltip ignore numberFormat.
     * */
    valueFormatter(
        formattingFunction?: TooltipFormattingFunction
    ): TooltipModule;
    /** Shows or hides the date on the title */
    shouldShowDateInTitle(shouldShowDateInTitle?: boolean): TooltipModule;
    /** Gets or Sets the title of the tooltip */
    title(title?: string): TooltipModule;
    /** Pass an override for the offset of your tooltip */
    tooltipOffset(offset?: TooltipOffset): TooltipModule;
    /** Pass an override for the ordering of your tooltip */
    topicsOrder(namesOrder?: string[]): TooltipModule;
    /** Gets or Sets the topicLabel of the data */
    topicLabel(label?: string): TooltipModule;
    /**
     * Updates the content and position of the tooltip with what every chart
     * dispatches on `customMouseMove`: the data point, its anchor, the chart's
     * size (ignored) and, from the multi-value charts, the topic colours.
     */
    update(
        dataPoint: TooltipDataShape,
        position: TooltipPosition,
        chartSize?: TooltipChartSize,
        colorMap?: TopicColorMap
    ): void;
    /**
     * @deprecated The order the multi-value charts used before 3.0; still
     * accepted, warns once. The charts now dispatch the order above.
     */
    update(
        dataPoint: TooltipListDataShape,
        colorMapping: TopicColorMap,
        xPosition: number,
        yPosition?: number
    ): void;
    /** Gets or Sets the valueLabel of the data */
    valueLabel(label?: string): TooltipModule;
    /**
     * Gets or Sets the most rows the tooltip shows; past that, the last row reads "+n more".
     * 0 shows every row. Default 12.
     */
    maxEntries(limit?: number): TooltipModule;
    /**
     * Gets or Sets how the key of the data point is shown in the title: 'date', 'number',
     * 'category' (as it is), or 'auto' (the default), which picks one per key.
     * */
    xAxisValueType(
        type?: 'auto' | 'date' | 'number' | 'category'
    ): TooltipModule;
}

export type TooltipModule = ChartModuleSelection<TooltipDataShape[]> &
    TooltipAPI;

/**
 * import {line, tooltip} from 'britecharts;
 *
 * const lineChart = line();
 *
 * lineChart
 *  .width(100)
 *  .height(100)
 *  .on('customMouseOver', tooltip.show)
 *  .on('customMouseMove', tooltip.update)
 *  .on('customMouseOut', tooltip.hide);
 *
 * lineContainer.datum(dataset).call(lineChart);
 *
 * tooltipContainer = d3Selection.select('.line-chart-container .line-chart .metadata-group');
 * tooltipContainer.datum([]).call(tooltip);
 *
 */
export function tooltip(): TooltipModule;