import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import handleClearDatabase from "../modales/settingsModal/handlers/handleClearDatabase";
import handleReboot from "../modales/settingsModal/handlers/handleReboot";
import handleSetDateTime from "../modales/settingsModal/handlers/handleSetDateTime";
import handleSubmit from "../modales/settingsModal/handlers/handleSubmit";

const GeneralSettings = () => {
  const deviceName_Redux = useSelector((state) => state.variables.deviceName);
  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);

  const [name, setName] = useState(deviceName_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 || "");

  useEffect(() => {
    setName(deviceName_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 || "");
  }, [
    deviceName_Redux,
    ip_Redux,
    subnet_Redux,
    gateway_Redux,
    datetime_Redux,
    ntp1_Redux,
    ntp2_Redux,
    ntp3_Redux,
    ntpTimezone_Redux,
    active_Redux,
  ]);

  return (
    <div className="p-4 bg-gray-100">
      <h2 className="text-lg font-bold mb-4">General Settings</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">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="flex justify-between mt-4">
          <button
            className="bg-blue-500 text-white px-4 py-2 rounded"
            onClick={() => handleReboot()}
          >
            Neustart CPL
          </button>
          <button
            className="bg-blue-500 text-white px-4 py-2 rounded"
            onClick={() => handleClearDatabase()}
          >
            Datenbank leeren
          </button>
          <button
            onClick={() =>
              handleSubmit(
                { name, ip, subnet, gateway },
                { name: deviceName_Redux, ip: ip_Redux, subnet: subnet_Redux }
              )
            }
            className="bg-blue-500 text-white px-4 py-2 rounded"
          >
            Übernehmen
          </button>
        </div>
      </form>
    </div>
  );
};

export default GeneralSettings;