/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { css } from '@emotion/css';
import { ContainerRef } from '@cleartrip/ct-design-container';

import { IAnimationConfig, IAnimationTransformValues } from '../type';

export const makeAnimatedClassNames = (animatedStyles?: IAnimationTransformValues, config?: IAnimationConfig) => {
  const { translateX, translateY, opacity, scale, height, width } = animatedStyles || {};

  const transform: string[] = [];
  const styles: Record<string, string | number> = {};

  if (translateX !== undefined) {
    transform.push(`translateX(${translateX}px)`);
  }
  if (translateY !== undefined) {
    transform.push(`translateY(${translateY}px)`);
  }
  if (scale !== undefined) {
    transform.push(`scale(${scale})`);
  }

  if (opacity !== undefined) {
    styles.opacity = opacity;
  }

  const { duration, timingFunction = 'ease-in', delay } = config || {};

  if (duration !== undefined) {
    styles['transitionDuration'] = `${duration}ms`;
  }

  if (timingFunction !== undefined) {
    styles['transitionTimingFunction'] = timingFunction;
  }

  if (delay !== undefined) {
    styles['transitionDelay'] = `${delay}ms`;
  }

  if (height !== undefined) {
    styles['height'] = typeof height === 'number' ? `${height}px` : height;
  }
  if (width !== undefined) {
    styles['width'] = typeof width === 'number' ? `${width}px` : width;
  }

  return [css(styles), transform.join(' ')];
};

const parseTransformString = (transformString: string): Record<string, string> => {
  const transforms: Record<string, string> = {};

  const regex = /(\w+)\(([^)]+)\)/g;
  let match;

  while ((match = regex.exec(transformString)) !== null) {
    const [, transformName, transformValue] = match;
    transforms[transformName] = transformValue;
  }

  return transforms;
};

export const updateTransformInlineStyles = (element: ContainerRef | null, transform: string) => {
  if (element) {
    if (element.style.transform) {
      const existingTransforms = parseTransformString(element.style.transform);
      const newTransforms = parseTransformString(transform);
      const mergedTransforms = { ...existingTransforms, ...newTransforms };
      element.style.transform = Object.entries(mergedTransforms)
        .map(([key, value]) => `${key}(${value})`)
        .join(' ');
    } else {
      element.style.transform = transform;
    }
  }
};