import { useLocaleDateTimeFormat } from '@centreon/ui';

import { Axis } from '@visx/visx';
import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
import { equals, head, isNil, last } from 'ramda';

import { margin } from '../../Chart/common';
import { getXAxisTickFormat } from '../../Chart/helpers';
import { getUnits } from '../timeSeries';
import type { Data } from './models';
import UnitLabel from './UnitLabel';
import useAxisY from './useAxisY';

interface Props {
  allUnits: Array<string>;
  data: Data;
  height: number;
  leftScale: ScaleLinear<number, number>;
  orientation: 'horizontal' | 'vertical';
  rightScale: ScaleLinear<number, number>;
  width: number;
  xScale:
    | ScaleLinear<number, number>
    | ScaleTime<number, number>
    | ScaleBand<number>;
}

const Axes = ({
  height,
  width,
  data,
  rightScale,
  leftScale,
  xScale,
  orientation,
  allUnits
}: Props): JSX.Element => {
  const { format } = useLocaleDateTimeFormat();
  const { lines, showBorder, yAxisTickLabelRotation } = data;
  const isHorizontal = equals(orientation, 'horizontal');

  const { axisLeft, axisRight } = useAxisY({
    data,
    graphHeight: height,
    graphWidth: width,
    isHorizontal
  });

  const [, secondUnit] = getUnits(lines);

  const xTickCount = Math.floor(Math.min(width / 100, 12));

  const domain = xScale.domain() as Array<number | Date>;

  const start = head(domain);
  const end = last(domain);

  const toISOString = (v: number | Date | undefined): string | undefined =>
    v !== undefined
      ? (v instanceof Date ? v : new Date(v)).toISOString()
      : undefined;

  const tickFormat =
    data?.axisX?.xAxisTickFormat ??
    getXAxisTickFormat({ end: toISOString(end), start: toISOString(start) });

  const formatAxisTick = (tick: unknown): string =>
    format({ date: new Date(tick as number | Date), formatString: tickFormat });

  const displayAxisRight = !isNil(secondUnit) && !isNil(rightScale);

  const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
  const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
  const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;

  const axisBottomProps = isHorizontal
    ? {}
    : ({ angle: 90, textAnchor: 'middle' } as const);

  return (
    <g>
      <AxisBottom
        numTicks={xTickCount}
        scale={xScale}
        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
        tickFormat={formatAxisTick}
        tickLabelProps={() => ({
          ...(axisLeft.tickLabelProps as () => Record<string, unknown>)(),
          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -12),
          ...axisBottomProps
        })}
        top={isHorizontal ? height - margin.bottom : 0}
      />

      {axisLeft.displayUnit && (
        <UnitLabel
          onUnitChange={data.axisYLeft?.onUnitChange}
          unit={axisLeft.unit}
          units={allUnits}
          x={isHorizontal ? -8 : width + 8}
          y={isHorizontal ? 16 : -2}
        />
      )}

      <AxisLeft
        numTicks={axisLeft?.numTicks}
        scale={leftScale}
        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
        tickFormat={axisLeft.tickFormat}
        tickLabelProps={() => ({
          ...(axisLeft.tickLabelProps as () => Record<string, unknown>)(),
          angle: yAxisTickLabelRotation,
          dx: isHorizontal ? -4 : 4,
          dy: isHorizontal ? 4 : -6
        })}
        tickLength={2}
      />

      {displayAxisRight && (
        <AxisRight
          left={isHorizontal ? width : 0}
          numTicks={axisRight?.numTicks}
          scale={rightScale}
          strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
          tickFormat={axisRight.tickFormat}
          tickLabelProps={() => ({
            ...(axisRight.tickLabelProps as () => Record<string, unknown>)(),
            angle: yAxisTickLabelRotation,
            dx: isHorizontal ? 4 : -4,
            dy: 4
          })}
          tickLength={2}
          top={isHorizontal ? 0 : height - margin.bottom}
        />
      )}
      {axisRight.displayUnit && (
        <UnitLabel
          onUnitChange={data.axisYRight?.onUnitChange}
          unit={axisRight.unit}
          units={allUnits}
          x={width}
          y={isHorizontal ? 16 : -(height + 8)}
        />
      )}
    </g>
  );
};

export default Axes;