import React, {
  FC,
  useState,
  useEffect,
  useCallback,
  PropsWithChildren,
} from 'react';
import useUnmount from '@umijs/hooks/es/useUnmount';
import debug from '@/debug';
import UILoader from './ui-loader';
import { useEvents, useMap } from '../hooks';

interface PointSimplifierProps extends AMapUI.PointSimplifier.Options<any> {
  events?: AMapUI.PointSimplifier.Events<any>;
}

const PointSimplifier: FC<PointSimplifierProps> = ({
  events,
  data,
  ...options
}) => {
  const { map } = useMap();
  const [timer, setTimer] = useState<number>();

  const transformContent = useCallback(
    (
      content:
        | 'rect'
        | 'circle'
        | 'none'
        | AMapUI.PointSimplifier.Render.Canvas.RenderContext2D
        | AMapUI.PointSimplifier.Render.Canvas.GetImageContent,
    ) => {
      if (typeof content === 'object') {
        return AMapUI.PointSimplifier.Render.Canvas.getImageContent(
          content.url,
          () => {
            debug('pointSimplifier')('图片加载成功');
            content?.onload && content?.onload();
            setTimer(new Date().getTime());
          },
          error => {
            debug('pointSimplifier')('图片加载失败');
            content?.onerror && content?.onerror(error);
          },
        );
      }
      return content;
    },
    [setTimer],
  );

  const [pointSimplifier] = useState<AMapUI.PointSimplifier>(() => {
    const { renderConstructor, renderOptions, ...opts } = options;

    if (renderOptions) {
      Object.keys(renderOptions).forEach(key => {
        if (
          [
            'pointStyle',
            'pointHardcoreStyle',
            'pointPositionStyle',
            'pointHoverStyle',
            'shadowPointStyle',
            'topNAreaStyle',
          ].includes(key)
        ) {
          const style: AMapUI.PointSimplifier.Render.Canvas.PointStyle = (renderOptions as any)[
            key
          ];
          if (style && style?.content) {
            (renderOptions as any)[key].content = transformContent(
              style?.content,
            );
          }
        }
      });
    }

    return new AMapUI.PointSimplifier({
      map,
      data: [],
      renderOptions,
      ...opts,
      ...(renderConstructor === 'GroupStyleRender'
        ? {
            renderConstructor:
              AMapUI.PointSimplifier.Render.Canvas.GroupStyleRender,
          }
        : {}),
    });
  });

  useEvents(events, pointSimplifier);

  useEffect(() => {
    pointSimplifier.setData(data);
  }, [pointSimplifier, JSON.stringify(data)]);

  useEffect(() => {
    if (timer) {
      debug('pointSimplifier')('重新渲染', timer);
      pointSimplifier.renderLater();
    }
  }, [timer, pointSimplifier]);

  useUnmount(() => {
    pointSimplifier.setData([]);
  });

  return null;
};

export default (props: PropsWithChildren<PointSimplifierProps>) => {
  return (
    <UILoader name="PointSimplifier">
      <PointSimplifier {...props} />
    </UILoader>
  );
};