import React from 'react';
import { Platform } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../s-components/layout/s-box';
import { theme } from '../../app/theme';

type TProps = {
  androidShadowOffset?: number;
  centerContent?: boolean;
  showShadow?: boolean;
  height?: number | string;
  justifyContent?: string;
  alignItems?: string;
  bg?: string;
  mb?: number;
  borderRadius?: number;
  width?: number;
  autoHeight?: boolean;
  children: React.ReactElement | null | (React.ReactElement | null)[];
};

export const ShadowBox: React.FC<TProps> = props => {
  const {
    children,
    centerContent,
    showShadow,
    androidShadowOffset,
    autoHeight,
    ...rest
  } = props;

  const androidPosition = centerContent
    ? { marginTop: 0, marginLeft: '1%' }
    : { position: 'absolute', bottom: androidShadowOffset || -8, left: '1%' };

  const iOSShadowStyle = showShadow
    ? {
        // shadowColor: theme.colorsRgba.shadowBoxColor,
        shadowColor: theme.colors.vulcan2,
        shadowOffset: { width: 0, height: 8 },
        shadowOpacity: 0.4,
        shadowRadius: 5,
      }
    : {};

  return (
    <SBox>
      {Platform.OS === 'ios' ? (
        <SBox width={1} height="100%" style={iOSShadowStyle} {...rest}>
          {children}
        </SBox>
      ) : (
        <SBox width={1} height="100%" position="relative">
          <SBox {...rest}>{children}</SBox>
          {showShadow ? (
            <LinearGradient
              locations={[0, 0.75, 0.85, 1]}
              colors={theme.gradients.androidShadow}
              style={
                {
                  height: autoHeight ? 5 : 20,
                  width: '98%',
                  zIndex: -1,
                  borderRadius: 8,
                  ...androidPosition,
                } as any
              }
            />
          ) : null}
          {autoHeight ? <SBox height={15} /> : null}
        </SBox>
      )}
    </SBox>
  );
};

ShadowBox.defaultProps = {
  centerContent: false,
  showShadow: true,
  autoHeight: false,
};