json-input-blog-DemoJsonInput

export default function DemoJsonInput() {
  const [isEditJSON, setIsEditJSON] = useState(false);
  const [isEditInput, setIsEditInput] = useState(false);
  const JSONTypes = ["posts", "users", "products", "locations"];
  const [selectedJSON, setSelectedJSON] = useState<
    "posts" | "users" | "products" | "locations"
  >("posts");

  // State to store the current selected JSON and modified data
  const [savedJSON, setSavedJSON] = useState({
    posts: JSONExamples[0],
    users: JSONExamples[1],
    products: JSONExamples[2],
    locations: JSONExamples[3],
  });

  // State to track the current edited JSON in TextArea or Input Editor
  const [editedJSON, setEditedJSON] = useState<string>(savedJSON[selectedJSON]);

  const scrollRef = useRef<HTMLDivElement | null>(null);

  // Update the editedJSON state when the selected JSON type changes
  useEffect(() => {
    setEditedJSON(savedJSON[selectedJSON]); // Update editedJSON when switching JSON types
  }, [selectedJSON, savedJSON]);

  // Function to handle saving the updated JSON
  const handleSave = () => {
    setSavedJSON((prev) => ({
      ...prev,
      [selectedJSON]: editedJSON, // Save the current edited JSON
    }));
    setIsEditJSON(false); // Exit JSON edit mode
    setIsEditInput(false); // Exit input edit mode
  };

  // Handle changes for the EditableJSONInput component
  const handleJSONInputChange = (updatedJSON: any) => {
    setEditedJSON(JSON.stringify(updatedJSON, null, 2)); // Store updated JSON string
  };

  // Handle switching between different JSON sets (posts, users, etc.)
  const handleJSONTypeChange = (
    type: "posts" | "users" | "products" | "locations"
  ) => {
    setIsEditJSON(false); // Disable edit mode when switching JSON types
    setIsEditInput(false); // Disable input edit mode
    setSelectedJSON(type); // Update the selected JSON type
  };

  return (
    <VStackFull className="h-full py-[2vh]" gap="gap-[3vh]">
      <HStackFull className="justify-evenly">
        {JSONTypes.map((type, index) => (
          <motion.button
            key={index}
            onClick={() => handleJSONTypeChange(type as any)} // Handle JSON type change
            className={`font-semibold px-[1.5vh] py-[0.2vh] rounded-[2vh] ${
              selectedJSON === type
                ? "text-cyan-300 border-500-md bg-col-740 metallicEdgesSm"
                : "text-fuchsia-300 border-600-md shadowNarrowNormal hover:bg-col-330 transition-300"
            }`}
          >
            {type}
          </motion.button>
        ))}
      </HStackFull>
      <VStack gap="gap-[0px]">
        <Flex
          className={`relative border-400-md overflow-hidden shadowNarrowNormal rounded-[1vh] h-[56vh] w-[98vw] md:w-[80vh]`}
        >
          {!isEditJSON && !isEditInput && (
            <ScrollProgressBar containerRef={scrollRef} height="h-[0.5vh]" />
          )}
          <HStack className="absolute top-[1.5vh] right-[1vh] z-10">
            <Box className={isEditInput ? "hidden" : "inline"}>
              <IconButton
                label={isEditJSON ? "Save" : "Edit Code"}
                onClick={() => {
                  if (isEditJSON) {
                    handleSave(); // Save the changes and exit edit mode
                  } else {
                    setIsEditJSON(true); // Enable code edit mode
                    setIsEditInput(false); // Disable other edit mode
                  }
                }}
                icon={isEditJSON ? FaRegSave : FaCode} // Switch between save and edit icons
              />
            </Box>
            <Box className={isEditJSON ? "hidden" : "inline"}>
              <IconButton
                label={isEditInput ? "Save" : "Edit Data"}
                onClick={() => {
                  if (isEditInput) {
                    handleSave(); // Save the changes and exit edit mode
                  } else {
                    setIsEditInput(true); // Enable input edit mode
                    setIsEditJSON(false); // Disable code edit mode
                  }
                }}
                icon={isEditInput ? FaRegSave : BsInputCursorText} // Switch between save and edit icons
              />
            </Box>
          </HStack>

          <>
            {isEditJSON ? (
              <ValidatedJSONNumberedInput
                initialValue={editedJSON} // Pass current edited JSON to the input
                onChange={(e) => setEditedJSON(e.target.value)} // Track changes
              />
            ) : isEditInput ? (
              <EditableJSONInput
                JSONString={editedJSON} // Pass the parsed JSON string to the input editor
                scrollRef={scrollRef}
                onChange={handleJSONInputChange} // Update state from input editor
              />
            ) : (
              <RenderJSONExample
                JSONString={savedJSON[selectedJSON]} // Use the saved JSON for rendering
                scrollRef={scrollRef}
              />
            )}
          </>
        </Flex>
      </VStack>
    </VStackFull>
  );
}