import React, { useState } from "react";
import { Renderer, Window, View, Button, Text } from "@nodegui/react-nodegui";

function MainWindow() {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const [open3, setOpen3] = useState(false);

  return (
    <>
      <Window windowTitle="Main window">
        <View>
          <Button text="Nested in view"   on={{clicked: () => setOpen1(!open1)}}/>
          <Button text="Nested in window" on={{clicked: () => setOpen2(!open2)}}/>
          <Button text="Not nested"       on={{clicked: () => setOpen3(!open3)}}/>
          {open1 && <Dialog text="Nested in view"/>}{/* Does not work */}
        </View>
        {open2 && <Dialog text="Nested in window"/>}{/* Partialy working */}
      </Window>
      {open3 && <Dialog text="Not nested"/>}{/* This works */}
    </>
  );
}

function Dialog({text}: {text: string}) {
  return (
    <Window windowTitle={text}>
      <View>
        <Text>{text}</Text>
      </View>
    </Window>
  )
}

Renderer.render(<MainWindow />);