import { RtUseBaseProps, RtUseBasePropsReturnValue } from '../rt-hoc.types';
import { version } from '@dpa/ritm-intro/version';
import { useContext, useEffect } from 'react';
import { FrameContext } from '@dpa/react-frame-context';
import { RtFrameLayers } from '@dpa/react-frame-intro';
import { gt } from 'semver';

/**
 * Хук для управления базовыми свойствами Ritm-компонентов.
 * Обеспечивает обработку идентификатора, событий мыши, класса и тестового идентификатора.
 *
 * @param {RtUseBaseProps} props - Входные свойства, включающие идентификатор, события, классы и произвольные данные.
 * @param minVersion - Минимальная необходимая версия для работоспособности компонента.
 * @returns {object} Объект с обработанными свойствами для использования в компоненте.
 *
 * @example
 * import React, { useId } from 'react';
 * import cn from 'classnames';
 * import { useRtBaseProps, RtBaseEvents, RtBaseProps } from '@dpa/react-hoc';
 *
 * type RtComponentProps = RtBaseEvents & RtBaseProps & { myProp: number }
 *
 * const RtComponent = (props: RtComponentProps) => {
 *   const { id, ...baseProps } = useRtBaseProps(props, '0.2.2');
 *   // Вытаскиваем className, id и другие значния если нужны
 *   const localId = useId()
 *   const ID = localId || id;
 *
 *   return (
 *     <div {...baseProps} id={ID}>
 *       Content here
 *     </div>
 *   );
 * };
 *
 * // Использование:
 * <RtComponent
 *   id="custom-id"
 *   data-testid="test-id"
 *   onClick={() => console.log('Clicked!')}
 *   onMouseEnter={() => console.log('Mouse entered')}
 * />
 */
export function useRtBaseProps<T>(
  props: RtUseBaseProps<T>,
  minVersion: string
): RtUseBasePropsReturnValue<T> {
  const layers = useContext<RtFrameLayers>(FrameContext);

  useEffect(() => {
    if (minVersion) {
      if (gt(minVersion.split('-')[0], version.split('-')[0])) {
        console.warn(
          `Минимальная необходимая версия дизайн-системы Ritm для работоспособности компонента - ${minVersion}. Пожалуйста обновите @dpa/ritm-intro и @dpa/react-frame-intro.`
        );
      }
    }
  }, []);

  const {
    id,
    onClick,
    dataTestId,
    onMouseEnter,
    onMouseUp,
    onMouseLeave,
    onMouseMove,
    onMouseOut,
    onMouseOver,
    onMouseDown,
    onBlur,
    onFocus,
    onKeyDown,
    onPointerDown,
    onPointerEnter,
  } = props;

  return {
    id,
    onClick,
    'data-testid': dataTestId,
    'data-size-scheme': layers.sizeScheme,
    onMouseEnter,
    onMouseUp,
    onMouseLeave,
    onMouseMove,
    onMouseOut,
    onMouseOver,
    onMouseDown,
    onBlur,
    onFocus,
    onKeyDown,
    onPointerDown,
    onPointerEnter,
  };
}