import dayjs from 'dayjs';
import { memo, useRef } from 'react';
import 'dayjs/locale/en';
import 'dayjs/locale/es';
import 'dayjs/locale/fr';
import 'dayjs/locale/pt';

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

import localizedFormat from 'dayjs/plugin/localizedFormat';
import timezonePlugin from 'dayjs/plugin/timezone';
import utcPlugin from 'dayjs/plugin/utc';
import useResizeObserver from 'use-resize-observer';

import Loading from '../../LoadingSkeleton';
import type { LineChartData, Thresholds } from '../common/models';
import Chart from './Chart';
import { useChartStyles } from './Chart.styles';
import LoadingSkeleton from './LoadingSkeleton';
import type { GlobalAreaLines, LineChartProps } from './models';
import useChartData from './useChartData';

dayjs.extend(localizedFormat);
dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);

interface Props extends Partial<LineChartProps> {
  data?: LineChartData;
  end: string;
  limitLegend?: false | number;
  loading: boolean;
  shapeLines?: GlobalAreaLines;
  start: string;
  thresholdUnit?: string;
  thresholds?: Thresholds;
  getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
  containerStyle?: string;
  transformMatrix?: {
    fx?: (pointX: number) => number;
    fy?: (pointY: number) => number;
  };
}

const WrapperChart = ({
  end,
  start,
  height = 500,
  width,
  shapeLines,
  axis,
  displayAnchor,
  zoomPreview,
  data,
  loading,
  timeShiftZones,
  tooltip = {
    mode: 'all',
    sortOrder: 'name'
  },
  annotationEvent,
  legend = {
    display: true,
    mode: 'grid',
    placement: 'bottom',
    showCalculations: {
      avg: true,
      max: true,
      min: true
    }
  },
  header,
  lineStyle,
  barStyle,
  thresholds,
  thresholdUnit,
  limitLegend,
  getRef,
  transformMatrix,
  additionalLines,
  min,
  max,
  boundariesUnit,
  ...rest
}: Props): JSX.Element | null => {
  const { classes, cx } = useChartStyles();
  const { adjustedData } = useChartData({ data, end, start });

  const containerRef = useRef<HTMLDivElement | null>(null);

  const {
    ref: resizeObserverRef,
    width: responsiveWidth,
    height: responsiveHeight
  } = useResizeObserver();

  const combinedRef = (element: HTMLDivElement | null) => {
    if (containerRef.current !== element) {
      containerRef.current = element;
      if (element) {
        getRef?.(containerRef);
      }
    }
    resizeObserverRef(element);
  };

  if (loading && !adjustedData) {
    return (
      <LoadingSkeleton
        displayTitleSkeleton={header?.displayTitle ?? false}
        graphHeight={height || 200}
      />
    );
  }

  if (!adjustedData) {
    return <NoData />;
  }

  return (
    <div
      className={cx(classes.wrapperContainer, rest?.containerStyle)}
      ref={combinedRef}
    >
      {!responsiveHeight ? (
        <Loading height={height || '100%'} width={width} />
      ) : (
        <Chart
          additionalLines={additionalLines}
          annotationEvent={annotationEvent}
          axis={axis}
          barStyle={barStyle}
          boundariesUnit={boundariesUnit}
          displayAnchor={displayAnchor}
          graphData={adjustedData}
          graphInterval={{ end, start }}
          graphRef={containerRef}
          header={header}
          height={height || responsiveHeight || 0}
          legend={legend}
          limitLegend={limitLegend}
          lineStyle={lineStyle}
          max={max}
          min={min}
          shapeLines={shapeLines}
          skipIntersectionObserver={rest.skipIntersectionObserver}
          thresholds={thresholds}
          thresholdUnit={thresholdUnit}
          timeShiftZones={timeShiftZones}
          tooltip={tooltip}
          transformMatrix={transformMatrix}
          width={width || responsiveWidth || 0}
          zoomPreview={zoomPreview}
        />
      )}
    </div>
  );
};

export default memo(WrapperChart);