"use strict";

import { useRef } from 'react';
import { CloseButton, GroupContainer, ModalBackground, ModalContainer, ModalDescription, ModalTitle } from '../styledModalComponents';
import Button from '../../styled/Button';
import { Modal, Text, View, StyleSheet } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ModalWrapper = ({
  iconTitle: IconTitle,
  title,
  description,
  buttonText,
  backgroundColorButton,
  isTextarea,
  textarea,
  setTextarea,
  handleCloseModal,
  handleClick,
  compact = false
}) => {
  const textareaRef = useRef(null);

  // const handleInput = () => {
  //   const textarea = textareaRef.current;
  //   if (textarea) {
  //     textarea.style.height = "auto";
  //     textarea.style.height = `${textarea.scrollHeight}px`;
  //   }
  // };

  const inner = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(CloseButton, {
      onPress: handleCloseModal,
      children: /*#__PURE__*/_jsx(Text, {
        style: {
          fontSize: 24
        },
        children: "\xD7"
      })
    }), IconTitle ? /*#__PURE__*/_jsx(IconTitle, {}) : /*#__PURE__*/_jsx(ModalTitle, {
      children: title
    }), description && /*#__PURE__*/_jsx(ModalDescription, {
      children: description
    }), isTextarea && /*#__PURE__*/_jsx(GroupContainer, {
      style: {
        flexDirection: 'column',
        position: 'relative'
      }
    }), !buttonText && /*#__PURE__*/_jsx(GroupContainer, {}), /*#__PURE__*/_jsxs(GroupContainer, {
      children: [/*#__PURE__*/_jsx(Button, {
        onPress: handleCloseModal,
        text: 'Cancel',
        style: {
          width: '100%'
        },
        unstyled: true,
        variant: "outlined"
      }), buttonText && /*#__PURE__*/_jsx(Button, {
        onPress: handleClick,
        text: buttonText
        // White label on the filled (e.g. red Delete) button. Button
        // applies an inline `color: color || 'black'` that overrides
        // the filled-variant white, so pass it explicitly.
        ,
        color: "#FFFFFF",
        style: {
          width: '100%',
          backgroundColor: backgroundColorButton
        },
        unstyled: true,
        variant: "filled"
      })]
    })]
  });
  return /*#__PURE__*/_jsx(Modal, {
    transparent: true,
    animationType: "fade",
    visible: true,
    onRequestClose: handleCloseModal,
    children: /*#__PURE__*/_jsx(ModalBackground, {
      children: compact ?
      /*#__PURE__*/
      // Dedicated small centered dialog. The base ModalContainer is
      // flex:1 / width:100% / height:100% (full-screen); style-merge
      // overrides proved unreliable, so confirm-style modals render in
      // their own bounded View instead — never full-screen (#14).
      // (Upstream also shrank this modal; this keeps that intent while
      // adding the white filled-button label via `inner` below.)
      _jsx(View, {
        style: styles.compactDialog,
        children: inner
      }) : /*#__PURE__*/_jsx(ModalContainer, {
        style: {
          maxWidth: 640
        },
        children: inner
      })
    })
  });
};
const styles = StyleSheet.create({
  compactDialog: {
    width: '85%',
    maxWidth: 360,
    alignSelf: 'center',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 24,
    gap: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4
    },
    shadowOpacity: 0.2,
    shadowRadius: 12,
    elevation: 8
  }
});
//# sourceMappingURL=ModalWrapper.js.map