import React, { useState, useEffect } from 'react';
import { useWindowDimensions } from 'react-native';
import { SlideshowItemWrapper } from './styles';
import { colors, theme } from 'data/dataMx';

export interface ISlideshowItemProps {
  /** this is an object that receive the min width of the item dependind the resolution */
  minWidth?: IItemMinWidth;
  /** this is the border radius of the container if its necessary */ 
  borderRadius?: string;
  /** a prop to set the margin separation between items */
  margin: string;
  /** background color for the container */
  bgColor?: colors;
  children?: React.ReactNode;
}

interface IItemMinWidth {
  desktop?: string;
  mobile?: string;
  tablet?: string;
}

export const AtomSlideshowItemContainer = ({
  minWidth = { desktop: '', mobile: '', tablet: '' },
  borderRadius = '8px',
  margin,
  bgColor = theme.neutral400,
  children,
}: ISlideshowItemProps) => {

  const {width} = useWindowDimensions()

  const [itemWidth, setItemWidth] = useState<string>('100%');

  useEffect(() => {
    if (width <= 640) {
      /* istanbul ignore next */
      setItemWidth(minWidth.mobile || '100%');
    } else if (width > 640 && width <= 1024) {
      setItemWidth(minWidth.tablet || '100%');
    } else if (width > 1024) {
      /* istanbul ignore next */
      setItemWidth(minWidth.desktop || '100%');
    }
  }, [width]);

  return (
    <SlideshowItemWrapper
      data-testid='slide'
      bgColor={bgColor}
      itemWidth={itemWidth}
      borderRadius={borderRadius}
      manageMargin={margin}
    >
      {children}
    </SlideshowItemWrapper>
  );
};
