/**
 * Copyright (c) 2024 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE-MIT file in the root directory of this source tree.
 */

import { Portal } from '@gorhom/portal';
import { useState } from 'react';
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { Button } from '../components';

export function Modal(props: {
  children: any;
  contentContainerStyle?: StyleProp<ViewStyle>;
}) {
  const [isOpen, setIsOpen] = useState(false);

  if (!isOpen) {
    return (
      <Button
        onPress={() => {
          setIsOpen(true);
        }}
        label="Show"
      />
    );
  }
  return (
    <Portal hostName="ModalHost">
      <View
        onTouchEnd={() => {
          setIsOpen(false);
        }}
        style={[
          StyleSheet.absoluteFill,
          {
            backgroundColor: 'rgba(0,0,0,0.3)',
            justifyContent: 'center',
            alignItems: 'center',
          },
        ]}>
        <View
          style={[
            { backgroundColor: 'white', padding: 16 },
            props.contentContainerStyle,
          ]}
          onTouchEnd={e => e.stopPropagation()}>
          {props.children}
        </View>
      </View>
    </Portal>
  );
}