import React, { useEffect, useState } from 'react';
import { StyledCardContainer } from './styles';
import { theme, keysTheme } from 'data/dataMx';
import { ViewProps } from 'react-native';
import { CSSObject } from 'styled-components';

export interface ICardContainerProps extends ViewProps {
  /** Align content in card */
  alignContent?: string;
  /** Align items in card */
  alignItems?: string;
  /** Card background color */
  bgColor?: keysTheme;
  /** Component to render on card */
  children?: any;
  /** Content direction */
  flexDirection?: string;
  /** Card height */
  height: string;
  /** Justify content card */
  justifyContent?: string;
  /** Margin card */
  manageMargin?: string;
  /** Padding card */
  managePadding?: string;
  /** Shadow size card */
  shadowSize?: 'small' | 'regular' | 'large';
  /** Card width */
  width: string;
  /** Card styles */
  styles?: CSSObject
}

export const AtomCardContainer = ({
  alignContent = 'center',
  alignItems = 'center',
  bgColor = 'neutral100',
  children,
  flexDirection = 'column',
  height,
  justifyContent = 'center',
  manageMargin = '0',
  managePadding = '0',
  shadowSize = 'regular',
  width,
  styles = {}
}: ICardContainerProps) => {
  // const [shadow, setShadow] = useState<string>('1px rgba(116, 134, 141, 0.2)');
  const [shadowOffsetWidth, setShadowOffsetWidth] = useState<number>(0);
  const [shadowOffsetHeight, setShadowOffsetHeight] = useState<number>(4);
  const [shadowRadius, setShadowRadius] = useState<number>(16);
  const [shadowOpacity, setShadowOpacity] = useState<number>(0.2);
  const [elevation, setelevation] = useState<number>(16);

  useEffect(() => {
    switch (shadowSize) {
      case 'small':
        setShadowOffsetWidth(0);
        setShadowOffsetHeight(5);
        setShadowRadius(8);
        setelevation(4);
        setShadowOpacity(0.1);
        break;
      case 'regular':
        setShadowOffsetWidth(0);
        setShadowOffsetHeight(4);
        setShadowRadius(16);
        setelevation(8);
        setShadowOpacity(0.2);
        break;
      case 'large':
        setShadowOffsetWidth(0);
        setShadowOffsetHeight(4);
        setShadowRadius(28);
        setelevation(14);
        setShadowOpacity(0.3);
        break;
    }
  }, [shadowSize]);

  return (
    <StyledCardContainer
      alignContent={alignContent}
      alignItems={alignItems}
      bgColor={theme[bgColor]}
      flexDirection={flexDirection}
      height={height}
      justifyContent={justifyContent}
      manageMargin={manageMargin}
      managePadding={managePadding}
      style={{
        shadowOffset: {
          width: shadowOffsetWidth,
          height: shadowOffsetHeight,
        },
        shadowColor: theme.neutral700,
        shadowOpacity,
        shadowRadius,
        elevation,
      }}
      testID='card-container'
      width={width}
      styles={styles}
    >
      {children}
    </StyledCardContainer>
  );
};
