const ButtonCtl = ({
    label,
    onClick,
    variant = 'primary', // primary  secondary  success   danger   warning   info    light    dark    link
    size = 'sm', // sm (nhỏ)  |  md (mặc định)   | lg (lớn)
    disabled = false,
    style, // Tùy chọn style để tùy chỉnh CSS
    type = 'button', // Kiểu button | submit | reset
    visible=true, tabIndex="-1",
    refCtl ,
    name,
    onKeyDown,
    className
  }) => {
    if(!visible){
      return null
    }
    const { Button  } =ReactBootstrap
    return (
      <Button 
        variant={variant}
        size={size}
        onClick={onClick}
        disabled={disabled}
        style={style}
        type={type}
        tabIndex={tabIndex}
        ref={refCtl}
        name={name}
        onKeyDown={onKeyDown}
        className={className}
      >
        {label}
      </Button >
    );
  };

  function IconActionCtl(props) {
    
    const { handleAction, caption,style, className, disabled=false, visible=true,variant='', tabIndex="-1",refCtl} = props 
    const combinedClassName = `${className} ${variant}`;
    if (disabled){
      return(
        null
      )
    }
    if (!visible) {
        return null; // Không render gì nếu không visible
    }
    const handleKeyDown = (e) => {
      
      if (e.key === 'Enter' && handleAction) {
        handleAction();
      }
    };
    return (
        <i className={combinedClassName} 
            onClick={()=>handleAction()}
            style={style}
            onKeyDown={handleKeyDown} 
            
            tabIndex={tabIndex}
            variant={variant}
            ref={refCtl}
            > {caption}</i> 
    );
  }

  const CustomAlert = ({ message, style='success', duration = 3000, onClose }) => {
    const [show, setShow] = useState(message?.length>0?true:false);
    const { Alert  } =ReactBootstrap
    useEffect(() => {
      if(message?.length>0){
        setShow(true)
      }
      
      const timer = setTimeout(() => {
        setShow(false);
        if (onClose) onClose();
      }, duration);

      return () => clearTimeout(timer); // Dọn dẹp timer khi component unmount
    }, [duration, onClose, message]);

    if (!show) return null;

    return (
      <Alert variant={style} onClose={() => setShow(false)} dismissible>
        {message}
      </Alert>
    );
  };

 

  const actionConfirm = ({ title, message, onConfirm, onCancel, confirmText, cancelText, objectId }) => {
    // 1. Tạo một div để render component vào
    const container = document.createElement('div');
    document.body.appendChild(container);
    const root = ReactDOM.createRoot(container);
  
    // 2. Hàm dọn dẹp để unmount component và xóa div
    const cleanup = () => {
      root.unmount();
      if (document.body.contains(container)) {
        document.body.removeChild(container);
      }
    };
  
    // 3. Xử lý khi người dùng hủy
    const handleCancel = () => {
      if (onCancel) {
        onCancel();
      }
      cleanup();
    };
  
    // 4. Xử lý khi người dùng xác nhận
    const handleConfirm = () => {
      if (onConfirm) {
        onConfirm(objectId);
      }
      cleanup();
    };
  
    // 5. Render component ActionConfirm
    // Component này sẽ tự quản lý vòng đời của nó và tự hủy sau khi hoàn thành.
    root.render(
      <ActionConfirm show={true} onConfirm={handleConfirm} onCancel={handleCancel} title={title} message={message} confirmText={confirmText} cancelText={cancelText} objectId={objectId} />
    );
  };

  const ActionConfirm = ({
    show,
    onConfirm,
    onCancel,
    message = "Are you sure?",
    confirmText = "Yes",
    cancelText = "No",
    objectId=null
  }) => {

    const { Modal, Button } = ReactBootstrap;


    return (
      <Modal show={show} onHide={onCancel}>
        <Modal.Header closeButton>
          <Modal.Title>Confirm Action</Modal.Title>
        </Modal.Header>
        <Modal.Body>{message}</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onCancel}>
            {cancelText}
          </Button>
          <Button variant="primary" onClick={()=>onConfirm(objectId)}>
            {confirmText}
          </Button>
        </Modal.Footer>
      </Modal>
    );
  };