import React, { useContext } from 'react';
import { View, ViewProps } from 'react-native';
import { GridContext } from './index';
import { ApplicationContext, MiniAppContext } from '../Context';
import styles from './styles';
import { SpanNumber } from './types';

export interface ItemProps extends ViewProps {
  /**
   * Represents the width of the Card component in terms of span numbers (1-12).
   */
  widthSpan?: SpanNumber;

  /**
   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
   */
  heightSpan?: SpanNumber;
}

const Item: React.FC<ItemProps> = ({
  widthSpan,
  heightSpan,
  children,
  style,
}) => {
  const { showGrid } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);
  const grid = useContext(GridContext);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  /**
   * render overlay view only dev mode
   */
  const renderOverlay = () => {
    return <View pointerEvents={'none'} style={styles.boxGrid} />;
  };

  return (
    <View
      style={[
        style,
        styles.item,
        {
          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
        },
        showBaseLineDebug && styles.debugBaseLine,
      ]}
    >
      {children}
      {showGrid && renderOverlay()}
    </View>
  );
};

Item.displayName = 'Item';

export default Item;