import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx
import ReactModal from "react-modal";
import { ClipLoader } from "react-spinners";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { useSelector } from "react-redux";
import { current } from "@reduxjs/toolkit";

import handleClearDatabase from "./handlers/handleClearDatabase";
import handleReboot from "./handlers/handleReboot";
import handleSetDateTime from "./handlers/handleSetDateTime";
import handleSubmit from "./handlers/handleSubmit";

// Definiere das App-Element für ReactModal
ReactModal.setAppElement("#__next");

function SettingModal({ showModal, onClose }) {
  // Redux-Werte abrufen
  const deviceName_Redux = useSelector((state) => state.variables.deviceName);
  const mac1_Redux = useSelector((state) => state.variables.mac1);

  const ip_Redux = useSelector((state) => state.variables.ip);
  const subnet_Redux = useSelector((state) => state.variables.subnet);
  const gateway_Redux = useSelector((state) => state.variables.gateway);
  const datetime_Redux = useSelector(
    (state) => state.variables.cplInternalTimestamp
  );
  const ntp1_Redux = useSelector((state) => state.variables.ntp1);
  const ntp2_Redux = useSelector((state) => state.variables.ntp2);
  const ntp3_Redux = useSelector((state) => state.variables.ntp3);
  const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
  const active_Redux = useSelector((state) => state.variables.ntpActive);

  // Lokale State-Variablen zum Bearbeiten
  const [name, setName] = useState(deviceName_Redux || "");
  const [mac1, setMac1] = useState(mac1_Redux || "");

  const [ip, setIp] = useState(ip_Redux || "");
  const [subnet, setSubnet] = useState(subnet_Redux || "");
  const [gateway, setGateway] = useState(gateway_Redux || "");
  const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
  const [ntp1, setNtp1] = useState(ntp1_Redux || "");
  const [ntp2, setNtp2] = useState(ntp2_Redux || "");
  const [ntp3, setNtp3] = useState(ntp3_Redux || "");
  const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
  const [active, setActive] = useState(active_Redux || "");

  const [showRebootModal, setShowRebootModal] = useState(false);
  // Originalwerte speichern
  const [originalValues, setOriginalValues] = useState({});
  // Erzeuge das currentValues-Objekt aus den aktuellen State-Werten
  const currentValues = {
    name,
    ip,
    subnet,
    gateway,
    ntp1,
    ntp2,
    ntp3,
    ntpTimezone,
    active,
  };
  // Effekt, um Redux-Werte beim Anzeigen des Modals in lokale State-Variablen zu setzen
  // Initialisiere currentPath für die gesamte Datei
  let currentPath = window.location.pathname;
  if (!currentPath.endsWith(".html")) {
    currentPath += ".html";
  }

  //---------------------------------------------------
  // Setze initiale Werte nur beim Öffnen des Modals
  useEffect(() => {
    if (showModal) {
      setName(deviceName_Redux || "");
      setMac1(mac1_Redux || "");

      setIp(ip_Redux || "");
      setSubnet(subnet_Redux || "");
      setGateway(gateway_Redux || "");
      setSystemUhr(datetime_Redux || "");
      setNtp1(ntp1_Redux || "");
      setNtp2(ntp2_Redux || "");
      setNtp3(ntp3_Redux || "");
      setNtpTimezone(ntpTimezone_Redux || "");
      setActive(active_Redux || "");
    }
  }, [showModal]); // Nur beim Öffnen des Modals erneut setzen

  useEffect(() => {
    setOriginalValues({
      name: deviceName_Redux,
      ip: ip_Redux,
      subnet: subnet_Redux,
      gateway: gateway_Redux,
      ntp1: ntp1_Redux,
      ntp2: ntp2_Redux,
      ntp3: ntp3_Redux,
      ntpTimezone: ntpTimezone_Redux,
      active: active_Redux,
    });
  }, [
    deviceName_Redux,
    ip_Redux,
    subnet_Redux,
    gateway_Redux,
    ntp1_Redux,
    ntp2_Redux,
    ntp3_Redux,
    ntpTimezone_Redux,
    active_Redux,
  ]);
  //---------------------------------------------------
  // Aktualisiere `systemUhr`, wenn sich `datetime_Redux` ändert
  useEffect(() => {
    setSystemUhr(datetime_Redux || "");
  }, [datetime_Redux]);
  //---------------------------------------------------

  return (
    <>
      <ReactModal
        isOpen={showModal}
        onRequestClose={onClose}
        style={{
          overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            zIndex: 100,
          },
          content: {
            top: "50%",
            left: "50%",
            right: "auto",
            bottom: "auto",
            marginRight: "-50%",
            transform: "translate(-50%, -50%)",
            width: "80%",
            maxWidth: "800px",
            padding: "20px",
            borderRadius: "8px",
            border: "none",
            position: "relative",
          },
        }}
      >
        {/* Modal-Inhalt */}
        <button
          onClick={onClose}
          style={{
            position: "absolute",
            top: "10px",
            right: "10px",
            background: "transparent",
            border: "none",
            cursor: "pointer",
            fontSize: "24px",
          }}
        >
          <i className="bi bi-x-circle-fill"></i>
        </button>

        {/* Weitere Inhalte wie Formular */}
        <div className="text-black">
          <h2 className="text-lg font-bold mb-4">System:</h2>
          <form>
            <div className="mb-4">
              <label className="block text-sm font-medium">Name:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">
                  MAC Adresse 1:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={mac1}
                  onChange={(e) => setMac1(e.target.value)}
                  disabled
                />
              </div>
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">IP:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ip}
                  onChange={(e) => setIp(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Subnet:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={subnet}
                  onChange={(e) => setSubnet(e.target.value)}
                />
              </div>
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">Gateway:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={gateway}
                  onChange={(e) => setGateway(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Systemuhr:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={systemUhr}
                  disabled
                />
                {/* Button für Systemzeit übernehmen */}

                <div className="flex w-full mt-1 justify-end">
                  <button
                    className="bg-littwin-blue text-white px-4 py-2 rounded"
                    onClick={() => {
                      if (
                        window.confirm(
                          "Möchten Sie wirklich die Systemzeit übernehmen?"
                        )
                      ) {
                        handleSetDateTime();
                      }
                    }}
                  >
                    Systemzeit übernehmen
                  </button>
                </div>
              </div>
            </div>

            {/* SNTP Client */}
            <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 1:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp1}
                  onChange={(e) => setNtp1(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 2:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp2}
                  onChange={(e) => setNtp2(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 3:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp3}
                  onChange={(e) => setNtp3(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Zeitzone:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntpTimezone}
                  onChange={(e) => setNtpTimezone(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">NTP Active:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={active}
                  onChange={(e) => setActive(e.target.value)}
                />
              </div>
            </div>

            {/* Modal Footer */}
            <div className="flex justify-between mt-4">
              <button
                className="bg-littwin-blue text-white px-4 py-2 rounded"
                onClick={() => handleReboot()}
              >
                Neustart CPL
              </button>
              <button
                className="bg-littwin-blue text-white px-4 py-2 rounded"
                onClick={() => handleClearDatabase()}
              >
                Datenbank leeren
              </button>
              <button
                onClick={() => handleSubmit(originalValues, currentValues)}
                className="bg-littwin-blue text-white px-4 py-2 rounded"
              >
                Übernehmen
              </button>
            </div>
          </form>
        </div>
      </ReactModal>

      {/* Reboot Modal */}
      <ReactModal
        isOpen={showRebootModal}
        ariaHideApp={false}
        style={{
          overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.75)",
            zIndex: 200,
          },
          content: {
            top: "50%",
            left: "50%",
            right: "auto",
            bottom: "auto",
            marginRight: "-50%",
            transform: "translate(-50%, -50%)",
            width: "400px",
            textAlign: "center",
            padding: "20px",
          },
        }}
      >
        <h3>CPL wird neu gestartet...</h3>
        <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
        <p>Bitte warten Sie 5 Sekunden...</p>
      </ReactModal>
    </>
  );
}

export default SettingModal;