import React, { useState } from 'react';
import Modal from './Modal.jsx';
import StatusIcon from './StatusIcon.jsx';

// "We've updated our Apps Script" banner, with a confirmation before it is dismissed.
const NoticeBanner = () => {
  const [showNotice, setShowNotice] = useState(true);
  const [showPopup, setShowPopup] = useState(false);

  const isServerNoticeAllowed = window.appLocalizer ? window.appLocalizer.show_apps_script_notice : true;

  // If server says no notice needed or user dismissed it, don't show
  if (!isServerNoticeAllowed || !showNotice) return null;

  return (
    <>
      <div className="osgsw-banner osgsw-banner--info ssgsw_appscript_notice233" role="status">
        <StatusIcon type="info" />
        <p>
          Hey! 👋 We’ve updated our Apps Script. Please <strong>update your Apps Script</strong> on Google Sheets to enjoy all the new changes.
        </p>
        <a className="osgsw-banner__action" href="#/setup">
          Setup Now <span aria-hidden="true">→</span>
        </a>
        <button type="button" className="osgsw-banner__close" aria-label="Dismiss notice" onClick={() => setShowPopup(true)}>
          &times;
        </button>
      </div>

      {showPopup && (
        <Modal
          title="Are you sure to close?"
          description="Please make sure that you have updated the Apps Script. Otherwise the plugin functionality may not work properly."
          onClose={() => setShowPopup(false)}
        >
          <button type="button" className="ssgsw_save_close1" onClick={() => setShowPopup(false)}>
            Later
          </button>
          <button
            type="button"
            className="ssgsw_save_close1 osgsw-modal-primary"
            onClick={() => {
              setShowPopup(false);
              setShowNotice(false);
            }}
          >
            Confirm & close
          </button>
        </Modal>
      )}
    </>
  );
};

export default NoticeBanner;