import type { NavigateFunction } from 'react-router-dom-v5-compat';

import { ChartThemeColor, getTheme } from '@patternfly/react-charts/victory';

import type { ChartBarProps, ChartLabelProps } from '@patternfly/react-charts/victory';

import merge from 'lodash/merge';

import { policySeverityColorMap } from 'constants/severityColors';

export const solidBlueChartColor = 'var(--pf-t--color--blue--40)';

export const severityColorScale = Object.values(policySeverityColorMap);

// Clone default PatternFly chart themes

const defaultTheme = getTheme(ChartThemeColor.multi);

export const defaultChartHeight = 260;

export const defaultChartBarWidth = 18;

const pointerStyles = {

data: { cursor: 'pointer' },

labels: { cursor: 'pointer' },

};

/** A Victory chart theme based on grey/yellow/orange/red colors to indicate severity */

export const patternflySeverityTheme = {

...defaultTheme,

bar: {

style: merge(defaultTheme?.bar?.style ?? {}, pointerStyles),

},

stack: {

...defaultTheme.stack,

colorScale: [...severityColorScale],

},

legend: {

...defaultTheme.legend,

colorScale: [...severityColorScale],

style: merge(defaultTheme?.legend?.style ?? {}, pointerStyles),

},

tooltip: {

style: {

...(defaultTheme.tooltip?.style ?? {}),

fontWeight: '600',

textAnchor: 'start',

},

flyoutPadding: { top: 8, bottom: 8, left: 12, right: 12 },

},

};

type ChartEventProp = NonNullable<ChartBarProps['events']>[number];

/**

* A helper function to generate a chart onClick event that initiates navigation to another page.

*/

export function navigateOnClickEvent(

navigate: NavigateFunction,

linkWith: (props: ChartLabelProps) => string

): ChartEventProp {

return {

target: 'data',

eventHandlers: {

onClick: () => [

{

mutation: (props) => {

navigate(linkWith(props));

return null;

},

},

],

},

};

}