// paper component
// --------------------------------------------------
// Props:
// - children: content to display
// - style: style of paper
// - elevation: elevation of paper
// - rounded: rounded corners of paper
// - onPress: function to call when paper is pressed
//

import React from 'react'
import { TouchableOpacity } from 'react-native'
import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
import { colors, spacing } from '../theme'
import { HEIGHT, WIDTH } from '../utils'

const Paper = ({
  children,
  style,
  elevation = 0,
  rounded = false,
  onPress,
  align,
  dismissable = false,
  m,
  my = spacing.s_4,
  mx,
  mt,
  mb,
  ml,
  mr,
  p = spacing.s_3,
  pt,
  pb,
  pl,
  pr,
  py,
  px,
  color = colors.white,
  width = 100,
  height,
}) => {
  const screenWidth = (WIDTH * width) / 100
  const screenHeight = height ? (HEIGHT * height) / 100 : null
  const [dismissed, setDismissed] = React.useState(false)
  const paperStyle = {
    backgroundColor: color,
    borderRadius: rounded ? spacing.s_2 : 0,
    elevation,
    width: screenWidth,
    height: height ? screenHeight : 'auto',
  }
  const marginStyle = {
    margin: m,
    marginTop: mt,
    marginBottom: mb,
    marginLeft: ml,
    marginRight: mr,
    marginVertical: my,
    marginHorizontal: mx,
  }
  const paddingStyle = {
    padding: p,
    paddingTop: pt,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingRight: pr,
    paddingVertical: py,
    paddingHorizontal: px,
  }
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View
        style={[
          paperStyle,
          style,
          m || mt || mb || ml || mr || my || mx ? marginStyle : null,
          p || pt || pb || pl || pr || py || px ? paddingStyle : null,
          align ? { alignItems: align } : null,
          dismissed ? { display: 'none' } : null,
        ]}
      >
        {dismissable && (
          <TouchableOpacity
            style={styles.dismiss}
            onPress={() => setDismissed(true)}
          >
            <MaterialIcons name='close' size={24} color={colors.n_600} />
          </TouchableOpacity>
        )}

        {children}
      </View>
    </TouchableWithoutFeedback>
  )
}

export default Paper

const styles = StyleSheet.create({
  dismiss: {
    // alignItems: 'flex-end',
    marginBottom: spacing.s_2,
    position: 'absolute',
    right: spacing.s_2,
    top: spacing.s_2,
    zIndex: 999,
  },
})