import React from 'react';
import {SafeAreaView, StatusBar, View} from 'react-native';
import {Colors} from '../../theme';
import styles from './Styles';
import {BoxShadow} from 'react-native-shadow';

export interface Props {
  children?: any;
  style?: any;
  shadowColor?: any;
  shadowBorder?: any;
  shadowRadius?: any;
  shadowOpacity?: any;
}

interface State {
  defaultHeight: any;
  defaultWidth: any;
}

export default class ShadowView extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      defaultHeight: 100,
      defaultWidth: 100,
    };
  }

  componentDidMount = () => {};

  render() {
    const {defaultHeight, defaultWidth} = this.state;
    const {
      children,
      style,
      shadowColor,
      shadowBorder,
      shadowRadius,
      shadowOpacity,
    } = this.props;
    const shadowOpt = {
      width: defaultWidth,
      height: defaultHeight,
      color: shadowColor || '#000',
      border: shadowBorder || 12,
      radius: shadowRadius || 0, //10
      opacity: shadowOpacity || 0.07,
      x: 1,
      y: 1,
      style: {
        alignItems: 'center',
        backgroundColor: 'transparent',
        alignSelf: 'center',
        ...style,
      },
    };
    return (
      <BoxShadow setting={shadowOpt}>
        <View
          onLayout={event => {
            const {height, width} = event.nativeEvent.layout;
            this.setState({defaultHeight: height, defaultWidth: width});
          }}>
          {children}
        </View>
      </BoxShadow>
    );
  }
}
