import React, { ReactNode } from 'react'
import { View, ViewProps, ViewStyle, FlexAlignType, StyleSheet } from 'react-native';
import { Spacing } from '../theme';
import EStyleSheet from 'react-native-extended-stylesheet'

export interface BoxProps extends ViewProps {
    children: ReactNode,
    padding?: keyof typeof Spacing,
    paddingBottom?: keyof typeof Spacing,
    paddingEnd?: keyof typeof Spacing,
    paddingHorizontal?: keyof typeof Spacing,
    paddingLeft?: keyof typeof Spacing,
    paddingRight?: keyof typeof Spacing,
    paddingStart?: keyof typeof Spacing,
    paddingTop?: keyof typeof Spacing,
    paddingVertical?: keyof typeof Spacing,
    margin?: keyof typeof Spacing,
    marginBottom?: keyof typeof Spacing,
    marginEnd?: keyof typeof Spacing,
    marginHorizontal?: keyof typeof Spacing,
    marginLeft?: keyof typeof Spacing,
    marginRight?: keyof typeof Spacing,
    marginStart?: keyof typeof Spacing,
    marginTop?: keyof typeof Spacing,
    marginVertical?: keyof typeof Spacing,
    style?: ViewStyle
}

export interface FlexComponentProps extends BoxProps {
    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
    alignItems?: FlexAlignType;
    alignSelf?: "auto" | FlexAlignType;
    flex?: number;
    flexBasis?: number | string;
    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    flexGrow?: number;
    flexShrink?: number;
    flexWrap?: "wrap" | "nowrap" | "wrap-reverse";
    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
}

function pick<T extends { [key: string]: any }>(object: T) {
    return function <K extends keyof T>(key: K) {
        return object[key]
    }
}

const pickSpacing = pick(Spacing)

export default function Box(props: BoxProps) {
    const {
        children,
        style: overrideStyle,
        padding,
        paddingBottom,
        paddingEnd,
        paddingHorizontal,
        paddingLeft,
        paddingRight,
        paddingStart,
        paddingTop,
        paddingVertical,
        margin,
        marginBottom,
        marginEnd,
        marginHorizontal,
        marginLeft,
        marginRight,
        marginStart,
        marginTop,
        marginVertical,
        ...rest
    } = props

    const style = createStyle(props)

    return (
        <View style={[style, overrideStyle]} {...rest}>
            {children}
        </View>
    )
}

const createStyle = props => {
    const {
        padding,
        paddingBottom,
        paddingEnd,
        paddingHorizontal,
        paddingLeft,
        paddingRight,
        paddingStart,
        paddingTop,
        paddingVertical,
        margin,
        marginBottom,
        marginEnd,
        marginHorizontal,
        marginLeft,
        marginRight,
        marginStart,
        marginTop,
        marginVertical,
    } = props

    const { style } = EStyleSheet.create({
        style: {
            padding: pickSpacing(padding),
            paddingBottom: pickSpacing(paddingBottom),
            paddingEnd: pickSpacing(paddingEnd),
            paddingHorizontal: pickSpacing(paddingHorizontal),
            paddingLeft: pickSpacing(paddingLeft),
            paddingRight: pickSpacing(paddingRight),
            paddingStart: pickSpacing(paddingStart),
            paddingTop: pickSpacing(paddingTop),
            paddingVertical: pickSpacing(paddingVertical),
            margin: pickSpacing(margin),
            marginBottom: pickSpacing(marginBottom),
            marginEnd: pickSpacing(marginEnd),
            marginHorizontal: pickSpacing(marginHorizontal),
            marginLeft: pickSpacing(marginLeft),
            marginRight: pickSpacing(marginRight),
            marginStart: pickSpacing(marginStart),
            marginTop: pickSpacing(marginTop),
            marginVertical: pickSpacing(marginVertical),
        }
    })

    return style
}