import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'
import { Portal } from '../Portal/Portal'
import { a11yProps } from '../utils/props/a11yProps'
import { selectSystemProps } from '../utils/props/selectSystemProps'
import { viewProps } from '../utils/props/viewProps'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

/**
 * WebModal component.
 *
 * @component
 * @param {Object} props - The component props.
 * @param {ReactNode} props.children - The content of the modal.
 * @returns {JSX.Element} The rendered WebModal component.
 */
export const WebModal = React.forwardRef(({ children, ...rest }, ref) => {
  return (
    <Portal>
      <View style={staticStyles.container} {...selectProps(rest)} focusable={true} ref={ref}>
        <div style={staticStyles.content} role="dialog" aria-modal={true}>
          {children}
        </div>
      </View>
    </Portal>
  )
})

WebModal.displayName = 'WebModal'

WebModal.propTypes = {
  ...selectedSystemPropTypes,
  // children to be rendered within the modal
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
}

const staticStyles = StyleSheet.create({
  container: {
    position: 'fixed',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    alignItems: 'stretch',
    boxSizing: 'border-box',
    display: 'flex',
    flexBasis: 'auto',
    flexDirection: 'column',
    flexShrink: 0,
    listStyle: 'none',
    margin: 0,
    minHeight: 0,
    minWidth: 0,
    padding: 0,
    textDecorationLine: 'none',
    zIndex: 1000
  },
  content: {
    flex: 1,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    zIndex: 1000,
    display: 'flex',
    overflowY: 'auto'
  }
})