import { RtGridRadius, RtGridSize } from '../rt-grid.types';
import { useContext } from 'react';
import { getGridLayoutNoneClass } from '../utils/get-grid-layout-none-class';
import cn from 'classnames';
import { getGridProviderClass } from '../utils/get-grid-provider-class';
import { RtGridChildContext, RtGridChildPosition } from '../rt-grid-child';

/**
 * Хук для интеграции функционала RtGrid в компонент, который управляет радиусами в составных компонентах.
 *
 * @function useGridChild
 * @param {Object} params - Параметры для настройки дочернего компонента сетки.
 * @param {RtGridSize} params.size - Конфигурация размера скруглений сетки.
 * @param {RtGridRadius} params.radius - Конфигурация типа скруглений сетки.
 * @returns {Object} Возвращает объект с CSS классом и объект атрибутов для настройки дочернего компонента сетки.
 * @property {string} gridChildClassname - CSS-класс для дочернего компонента сетки, определяется в зависимости от текущего состояния.
 * @property {Object} gridAttributes - Объект с атрибутами для дочернего компонента.
 * @property {string} data-rt-grid - Атрибут данных с информацией о радиусе и размере компонента.
 * @property {string} data-rt-grid-position - Атрибут данных с информацией о позиции в гриде.
 *
 * @example
 * import index from './index.module.css';
 * import { useGridChild, RtGridChildContext } from '@dpa/react-grid';
 * import { ReactNode, useId } from 'react';
 * import classnames from 'classnames/bind'
 *
 * const cn = classnames.bind(index)
 *
 * export function TestGridButton(props: {
 *   radius?: 'primary' | 'secondary';
 *   color?: 'red' | 'black';
 *   size?: 'xs' | 'sm' | 'md' | 'lg';
 *   children?: ReactNode
 * }) {
 *   const {
 *     radius = 'primary',
 *     size = 'lg',
 *     color = 'black',
 *     children
 *   } = props
 *   const { gridChildClassname, gridAttributes } = useGridChild({ size, radius });
 *
 *   return (
 *     <div
 *       className={cn('test-grid-button', `test-grid-button--${color}`, gridChildClassname)}
 *       {...gridAttrs}
 *       {...baseProps}
 *     >
 *     // ЕСЛИ компонент имеет слот или в теории может содержать другой элемент с поддержкой RtGird обязательно обнуляем контекст!
 *       <RtGridChildContext.Provider value={null}>
 *         {children}
 *       </RtGridChildContext.Provider>
 *     </div>
 *   );
 * }
 *
 * // ./index.module.css
 *
 * .test-grid-button {
 *   border-radius: var(--grid-child-child-border-radius-top-left)
 *     var(--grid-child-child-border-radius-top-right)
 *     var(--grid-child-child-border-radius-bottom-right)
 *     var(--grid-child-child-border-radius-bottom-left);
 * }
 *
 * // USAGE:
 *
 *  <RtGrid direction="vertical">
 *    <TestGridButton />
 *    <TestGridButton />
 *    <TestGridButton />
 *    <TestGridButton />
 *  </RtGrid>
 *
 *  // OR without RtGird:
 *
 *  <div>
 *    <TestGridButton />
 *  </div>
 */
export function useGridChild({
  size,
  radius,
}: {
  size: RtGridSize;
  radius: RtGridRadius;
}): {
  gridChildClassname: string;
  gridAttributes: {
    'data-rt-grid': `${RtGridRadius}-${RtGridSize}`;
    'data-rt-grid-position': RtGridChildPosition;
  };
} {
  const context = useContext(RtGridChildContext);

  const isNotInGrid = !context?.position;

  return {
    gridChildClassname: isNotInGrid
      ? cn(getGridLayoutNoneClass(), getGridProviderClass())
      : '',
    gridAttributes: {
      'data-rt-grid': `${radius}-${size}`,
      'data-rt-grid-position': context?.position || 'none',
    },
  };
}