import logo from "../logo.svg";
import "../App.css";
import { FloatingWindow, FloatingWindowContextProvider, useFloatingWindow } from "../../../../src";

function App() {
  return (
    <FloatingWindowContextProvider>
      <AppInternal />
    </FloatingWindowContextProvider>
  );
}

function AppInternal() {
  const { showWindow, getOpenWindowNames } = useFloatingWindow();

  const WindowButton = (props: { name: string }) => {
    return (
      <button type="button" onClick={(_e) => showWindow(props.name)}>
        {`show ${props.name}`}
      </button>
    );
  };

  return (
    <>
      <WindowButton name="A" />
      <WindowButton name="B" />
      <WindowButton name="C" />

      <div className="App">
        <header className="App-header" style={{ backgroundColor: "darkorchid" }}>
          <div> Names: {getOpenWindowNames()}</div>
          <FloatingWindow
            title="A"
            name="A"
            initialPosition={{ x: 50, y: 50 }}
            initialSize={{ width: 200, height: 200 }}
          >
            <div style={{ color: "black" }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed convallis ligula, at consectetur
              lorem. Praesent nec imperdiet massa. Proin interdum nec nisl eu dignissim. Duis quis justo porta,
              vulputate lectus suscipit, cursus dui. Phasellus in nunc ac ipsum ultricies efficitur malesuada posuere
              erat. Phasellus fermentum erat velit, ut blandit nisi laoreet et. Quisque suscipit ornare dui, vitae
              tincidunt nibh cursus vitae. Phasellus iaculis, velit vitae porta dictum, urna nunc venenatis metus, vel
              maximus nibh augue in eros. Suspendisse luctus pharetra lorem ac fermentum. Suspendisse bibendum
              ullamcorper eros, id egestas libero hendrerit non. Ut ut nulla augue. Cras accumsan vehicula mauris, eu
              luctus libero eleifend egestas. Curabitur et leo sit amet risus scelerisque dignissim. Sed id ipsum ac
              tortor facilisis tincidunt at ac velit. Vivamus congue ut purus malesuada laoreet. Quisque sem augue,
              commodo sed erat a, luctus maximus nulla. Phasellus at lorem ultricies, egestas sapien non, suscipit
              mauris. Maecenas tincidunt lacinia condimentum. Cras eleifend arcu at nunc porta ultricies. In commodo
              elit quis feugiat dictum. Curabitur posuere vestibulum ante, non ullamcorper ex. Vestibulum ante ipsum
              primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque aliquam, dolor ut molestie
              porta, arcu nisi posuere turpis, eget commodo urna neque a purus. Donec a mauris ac nisl condimentum
              imperdiet. Pellentesque a turpis condimentum, blandit neque in, luctus metus. Nullam ut placerat ipsum.
              Nam scelerisque neque neque, nec luctus odio dictum ut. Etiam efficitur nisl diam, nec egestas massa
              iaculis in. Maecenas dignissim molestie suscipit. Suspendisse non nisl non nunc sagittis tincidunt quis
              nec urna. Vestibulum suscipit sem nec blandit sodales. Vivamus eget magna imperdiet, ullamcorper odio
              eget, tincidunt diam. Ut tristique ante non nibh ultrices, eget sodales neque accumsan. In nunc urna,
              eleifend id dictum at, fringilla quis magna. Sed feugiat ex eget dolor rutrum faucibus. Fusce eleifend ex
              velit, quis suscipit sapien pulvinar quis. Aenean egestas bibendum odio, et facilisis tortor tincidunt a.
              In interdum odio ultrices diam accumsan aliquam. Cras pharetra dapibus dictum. Proin non tellus convallis
              nunc sodales dapibus. Maecenas vitae mi imperdiet, mattis arcu a, pellentesque nisi. Suspendisse luctus,
              magna sed gravida tristique, lacus ipsum luctus enim, sed condimentum
            </div>
          </FloatingWindow>

          <FloatingWindow
            title="Window B"
            name="B"
            initialPosition={{ x: 60, y: 60 }}
            initialSize={{ width: 400, height: 400 }}
          >
            <img style={{ backgroundColor: "white" }} src={logo} className="App-logo" alt="logo" />
          </FloatingWindow>

          <FloatingWindow
            title="Image Window"
            name="C"
            initialPosition={{ x: 80, y: 80 }}
            initialSize={{ width: 400, height: 400 }}
          >
            <img
              style={{ maxWidth: "100%" }}
              src="https://www.linz.govt.nz/sites/default/files/styles/standard_header_image/public/media/header-images/Information-for-surveyors.jpg?itok=l4JatlBU"
            />
          </FloatingWindow>

          <img src={logo} className="App-logo" alt="logo" />
          <p>Hello Vite + React!</p>
        </header>
      </div>
    </>
  );
}

export default App;
