import React, { Fragment, ReactElement } from 'react';
import { useWindowDimensions } from 'react-native';

/**
 * validate children type
 * @param children
 * @param childrenTypes
 */
const validateChildren = (
  children: React.ReactNode | React.ReactNode[],
  childrenTypes: Array<React.ReactNode>,
) => {
  const validateType = (child: React.ReactElement) => {
    const valid = childrenTypes.some(
      childrenType => child?.type === childrenType || child?.type === Fragment,
    );
    if (!valid) {
      console.warn(
        `Wrong children type for this component, expected are ${childrenTypes
          .map(item => item)
          .join(', ')}.`,
      );
    }
  };
  if (Array.isArray(children)) {
    const flattenChildren = React.Children.toArray(children).filter(
      (child): child is ReactElement => React.isValidElement(child),
    );
    for (const child of flattenChildren) {
      validateType(child);
    }
    return flattenChildren;
  } else {
    if (React.isValidElement(children)) {
      validateType(children as ReactElement);
    }
    return children;
  }
};

const useGridSystem = () => {
  const windowSize = useWindowDimensions();
  const numberOfColumns = windowSize.width > 600 ? 24 : 12;
  return { numberOfColumns };
};

export { useGridSystem, validateChildren };