const PopupForm = ({ 
  show, 
  setShow, 
  childComponent: ChildComponent, 
  size = 'lg', // 'sm' | 'lg' | 'xl' | undefined
  effect = 'fadeModal', 
  title, 
  backdrop = 'static', // 'static' | true | false
  fullscreen = false, // Thêm tùy chọn fullscreen
  showCloseButton =true,
  zIndex=1050,
  ...props 
}) => {
  const { Modal } = ReactBootstrap
  const handleClose = () => {
      setShow(false);
  };

  return (

      <Modal      
          show={show} 
          onHide={handleClose} 
          size={size} 
          dialogClassName={effect} 
          backdrop={backdrop} // Thiết lập backdrop
          fullscreen={fullscreen} // Thiết lập fullscreen
          style={{zIndex:zIndex}}
          backdropClassName="custom-backdrop"
      > 
        {showCloseButton==true ? 
        (
          <>
              <Modal.Header  /*closeButton*/>               
                 
                <Modal.Title>{title}</Modal.Title>
                <IconActionCtl 
                                    className="fa fa-window-close-o"
                                    handleAction={()=>handleClose()}
                                    style={{ fontSize:25, paddingLeft:10 , color:'gray', float:'right'}}
                                    
                                /> 
            </Modal.Header>
          </>
        ):
        (
          <>
            <Modal.Header   >
                <Modal.Title>{title}</Modal.Title>
            </Modal.Header>
          </>
        )
      }        
          <Modal.Body>
              <ChildComponent {...props} />
          </Modal.Body>
      </Modal>
  );
};

const ContainerExpanse =(props)=>{
  const { 
    HeaderComponent, 
    BodyComponent, 
    showContentDefault =true, 
    style={margin:0}, key, actionExpand = null, effectHover = true,
    styleHeader={background: showContentDefault ? 'rgb(241 170 240 / 24%)':"", padding:3},
    styleBody={padding:'5px', display:(showContentDefault==false?'none':'')} ,
    showExpand = true,
    stylePaddingLeftExpanseButton=15,
    styleExpanseIcon
  }= props

  const {Card} = ReactBootstrap
  const [showContent, setShowContent] = useState(showContentDefault);

  const handleToggle = () => {
    setShowContent(!showContent);
    if(showContent==false && actionExpand){
      actionExpand();
    }
  };

  return(
    <Card  key={key} style={style}>
      { HeaderComponent &&
      <Card.Header style={styleHeader} className={ effectHover==true? "row-hover":""}>
        <div style={{marginRight:15}}>    
          { showExpand==true &&
            <i style={{position:'absolute', top:0,right:5, fontSize:25, paddingLeft:stylePaddingLeftExpanseButton}} onClick={handleToggle} className= {!showContent ? "fa fa-angle-double-up" : "fa fa-angle-double-down"} ></i>
          }
          {HeaderComponent}     
        </div>
      </Card.Header>
      }
      { BodyComponent && (
        <Card.Body style={{...styleBody, display:(showContent==false?'none':'')}} >
          {BodyComponent}
        </Card.Body>
      )}
    </Card>
  )
}

const CtlContainerExpanse =(props)=>{
  const { 
    HeaderComponent, 
    BodyComponent, 
    showContent, setShowContent,effectHover = true,
    style={margin:0}, key,
    showExpand = false
  }= props

  const {Card} = ReactBootstrap


  const handleToggle = () => {
    if (setShowContent) setShowContent(!showContent);
  };

  return(
    <Card  key={key} style={style}>
      { HeaderComponent &&
      <Card.Header className={ effectHover==true? "row-hover":""} style={{background: showContent ? 'rgb(241 170 240 / 24%)':"", padding:5}} >
        <div>        
          { showExpand === true &&
            <i style={{float:'right', fontSize:25, paddingLeft:15}} onClick={handleToggle} className= {showContent ? "fa fa-angle-double-up" : "fa fa-angle-double-down"} ></i>
          }
         
          {HeaderComponent}     
        </div>
      </Card.Header>
      }
      { BodyComponent && (
        <Card.Body style={{padding:'5px', display:(showContent==false?'none':'')}}>
          {BodyComponent}
        </Card.Body>
      )}
    </Card>
  )
}

const ContentContainer = (props) => {
    const { children, maxHeight = 300, flag = false } = props;
    const [isExpanded, setIsExpanded] = useState(flag);
    const [showExpandButton, setShowExpandButton] = useState(false);
    const contentRef = useRef(null); // Ref for the visible content div
    const measureRef = useRef(null); // Ref for measuring actual height

    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    // Check if there's any content to display
    const hasContent = React.Children.count(children) > 0 && children !== null && children !== undefined;

    useEffect(() => {
        if (measureRef.current && hasContent) {
            // Measure the actual height of the content when it's fully rendered
            const actualHeight = measureRef.current.scrollHeight;
            setShowExpandButton(actualHeight > maxHeight);
        } else {
            setShowExpandButton(false); // No content or no overflow
        }
    }, [children, maxHeight, hasContent]);

    // If no content, don't render the container at all
    if (!hasContent) {
        return null;
    }
    
    return (
        <div className="content-container-wrapper">
            <style>{`
                .content-container-wrapper {
                    position: relative;
                    max-height: ${isExpanded ? 'none' : `${maxHeight}px`};
                    overflow: hidden;
                    transition: max-height 0.3s ease-in-out;
                    border-radius: 8px;
                    border: 0px solid #e0e0e0;
                    background-color: #fff;
                    padding: 15px;
                    margin-bottom: 15px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
                }
                .content-container-wrapper .content-display {
                    opacity: ${isExpanded ? 1 : 0.9};
                    transition: opacity 0.3s ease;
                }
                .content-container-wrapper .fade-overlay {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 80px; /* Tăng chiều cao overlay để nút không bị che */
                    background: linear-gradient(to top, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
                    pointer-events: none;
                    display: flex;
                    align-items: flex-end; /* Căn chỉnh nút xuống dưới */
                    justify-content: flex-end; /* Đẩy nút sang phải */
                    padding-bottom: 10px;
                }
                .content-container-wrapper .fade-overlay .expand-button { margin-right: 15px; } /* Căn chỉnh nút với padding của container */
                .content-container-wrapper .expand-button {
                    background: #e7339a;
                    color: white;
                    border: none;
                    border-radius: 20px;
                    padding: 8px 20px;
                    cursor: pointer;
                    font-size: 0.9rem;
                    font-weight: bold;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                    transition: all 0.3s ease;
                    pointer-events: auto; /* Cho phép tương tác với nút */
                }
                .content-container-wrapper .expand-button:hover {
                    background: #c41d7f;
                    transform: translateY(-2px);
                }
                .content-container-wrapper .hide-button-wrapper { text-align: end; padding-right: 15px; } /* Đẩy nút sang phải và căn chỉnh padding */
                .content-container-wrapper .hide-button {
                    background: transparent;
                    color: #e7339a;
                    border: 1px solid #e7339a;
                    border-radius: 20px;
                    padding: 8px 20px;
                    cursor: pointer;
                    font-size: 0.9rem;
                    font-weight: bold;
                    transition: all 0.3s ease;
                }
                .content-container-wrapper .hide-button:hover {
                    background: #fbe9f5;
                }
            `}</style>

            {/* Content to be displayed and potentially truncated */}
            <div ref={contentRef} className="content-display">
                {children}
            </div>

            {/* Hidden div to measure actual content height without affecting layout */}
            <div ref={measureRef} style={{ position: 'absolute', visibility: 'hidden', height: 'auto', overflow: 'visible', whiteSpace: 'normal', padding: '15px' }}>
                {children}
            </div>

            {showExpandButton && !isExpanded && (
                <div className="fade-overlay">
                    <button 
                        onClick={toggleExpand} 
                        className="expand-button"
                    >
                        Show More <i className="fa fa-angle-down ms-2"></i>
                    </button>
                </div>
            )}
            {showExpandButton && isExpanded && (
                <div className="hide-button-wrapper mt-3">
                    <button 
                        onClick={toggleExpand} 
                        className="hide-button"
                    >
                        Hide <i className="fa fa-angle-up ms-2"></i>
                    </button>
                </div>
            )}
        </div>
    );
};