import { useFormikContext } from "formik";
import type { PayloadConfigFields } from "../../../../types/types";
import PayloadOptionsToggle from "./PayloadOptionsToggle";

const PayloadOptions = () => {
  const { values } = useFormikContext<PayloadConfigFields>();

  const validPayloadKeys: Array<keyof PayloadConfigFields> = [
    "includeMac",
    "includeSaFID",
    "includeCharHeight",
    "includeConfidence",
    "includeCorrectSpacing",
    "includeDecodeID",
    "includeDirection",
    "includeFrameHeight",
    "includeFrameID",
    "includeFrameTimeRef",
    "includeFrameWidth",
    "includeHorizSlew",
    "inclduePlate",
    "includeNightModeAction",
    "includeOverview",
    "includePlateSecondary",
    "includePlateTrack",
  ];

  const includeKeys = validPayloadKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");

  const handleSubmit = async (values: PayloadConfigFields) => {
    console.log("Payload Config Submitted:", values);
  };

  return (
    <div className="">
      <div className="flex flex-col space-y-4">
        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
          <div className="flex flex-col space-y-4 h-100 overflow-y-auto p-3">
            {includeKeys.map((key, index) => (
              <PayloadOptionsToggle key={index} label={key} value={key} />
            ))}
          </div>
          <button
            type="button"
            onClick={() => handleSubmit(values)}
            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
          >
            Save Settings
          </button>
        </div>
      </div>
    </div>
  );
};

export default PayloadOptions;