import React, {ReactNode} from 'react';
import {ColorValue, TouchableOpacity, View, ViewStyle} from 'react-native';

type Props = {
  children: ReactNode;
  paddingTop?: number;
  paddingBottom?: number;
  marginTop?: number;
  marginBottom?: number;
  paddingRight?: number;
  paddingLeft?: number;
  marginRight?: number;
  marginLeft?: number;
  flexDirection?: 'row' | 'column';
  justifyContent?: 'flex-start' | 'flex-end' | 'space-between' | 'center';
  alignItems?: 'center' | 'flex-start' | 'flex-end';
  borderRadius?: number;
  marginVertical?: number;
  marginHorizontal?: number | string;
  paddingVertical?: number;
  paddingHorizontal?: number;
  height?: number | string;
  width?: number | string;
  backgroundColor?: string;
  flex?: number;
  position?: 'absolute' | 'relative' | undefined;
  top?: string | number | undefined;
  left?: string | number | undefined;
  bottom?: string | number | undefined;
  right?: string | number | undefined;
  borderTopWidth?: number | undefined;
  borderBottomWidth?: number | undefined;
  borderBottomColor?: ColorValue | undefined;
  borderTopColor?: ColorValue | undefined;
  borderWidth?: number | undefined;
  borderColor?: ColorValue | undefined;
  maxWidth?: number | string;
  onPress?: () => void;
  zIndex?: number;
};

export const Box = (props: Props) => {
  const {
    marginHorizontal = 0,
    marginVertical = 0,
    paddingHorizontal = 0,
    paddingVertical = 0,
    zIndex = 99999,
  } = props;
  const {
    children,
    paddingTop = paddingVertical,
    paddingBottom = paddingVertical,
    marginBottom = marginVertical,
    marginTop = marginVertical,
    paddingRight = paddingHorizontal,
    paddingLeft = paddingHorizontal,
    marginRight = marginHorizontal,
    marginLeft = marginHorizontal,
    borderRadius = 0,
    flexDirection = 'column',
    justifyContent = 'flex-start',
    alignItems = 'flex-start',
    backgroundColor = 'transparent',
    height,
    width = '100%',
    flex,
    onPress,
    position,
    top,
    left,
    right,
    bottom,
    borderBottomColor,
    borderTopColor,
    borderBottomWidth,
    borderTopWidth,
    borderColor,
    borderWidth,
    maxWidth,
  } = props;

  const boxStyles = {
    marginTop,
    marginBottom,
    paddingTop,
    paddingBottom,
    paddingRight,
    paddingLeft,
    marginRight,
    marginLeft,
    borderRadius,
    flexDirection,
    justifyContent,
    alignItems,
    height,
    width,
    backgroundColor,
    flex,
    position,
    left,
    bottom,
    right,
    top,
    borderBottomColor,
    borderTopColor,
    borderBottomWidth,
    borderTopWidth,
    borderColor,
    borderWidth,
    maxWidth,
    zIndex,
  } as ViewStyle;

  if (onPress) {
    return (
      <TouchableOpacity style={boxStyles} onPress={onPress} activeOpacity={0.8}>
        {children}
      </TouchableOpacity>
    );
  }

  return <View style={boxStyles}>{children}</View>;
};