import logo from "./logo.svg";
import "./App.css";
import {
  FloatingWindow,
  FloatingWindowContextProvider,
  FloatingWindowHeader,
  useFloatingWindow,
} from "@linzjs/floating-windows";
import { CustomComponent } from "./CustomComponent";

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

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

  const toggleWindow = (windowName: string) => {
    isWindowOpen(windowName) ? hideWindow(windowName) : showWindow(windowName);
  }

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

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

      <div className="App">
        <header className="App-header">
          <div> Names: {getOpenWindowNames().join(", ")}</div>

          <FloatingWindow
            name="A"
            title="window Title"
            initialPosition={{ x: 50, y: 50 }}
            initialSize={{ width: 200, height: 200 }}
            headerProperties={{
              headingText: "window A",
            }}
          >
            <div style={{ color: "red", fontSize: "14px", textAlign: "left" }}>
              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
            name="B"
            initialPosition={{ x: 60, y: 60 }}
            initialSize={{ width: 900, height: 600 }}
            header={
              <div>
                <span color="red">
                  complete <b>customized</b> header
                </span>
                <span color="red">
                  <button className="custom-button" onClick={() => alert('custom button clicked')}>click to show alert</button>
                </span>
              </div>
            }
          >
            <img style={{ backgroundColor: "white" }} src={logo} className="App-logo" alt="logo" />
          </FloatingWindow>

          <FloatingWindow
            name="C"
            initialPosition={{ x: 80, y: 80 }}
            initialSize={{ width: 800, height: 800 }}
            bounds="window"
            headerProperties={{
              headingText: "head text from header property",
            }}
            headerRender={(renderProps) => (
              <FloatingWindowHeader
                headingText={`My Header (${renderProps.windowProps.headerProperties?.headingText})`}
                buttons={[
                  <button className="custom-button" key="custom-button-1" onClick={()=> alert("clicked on custom button 1")}>custom button 1 </button>,
                  <button className="custom-button" key="custom-button-2" onClick={()=> alert("clicked on custom button 2")}>custom button 2 </button>,
                ].concat(renderProps.standardButtons)}
              >
                <div style={{ display: "inline-flex", alignItems: "center" }}>
                  <img
                    width={"48px"}
                    height={"100%"}
                    src="https://www.linz.govt.nz/sites/default/files/styles/featured_content/public/media/dunstan_downs_-_wether_range_.jpg"
                  />
                </div>
                <div>Random Text</div>
              </FloatingWindowHeader>
            )}
          >
            <img
              style={{ maxWidth: "100%", maxHeight: "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>

          <FloatingWindow
            name="D"
            initialPosition={{ x: 80, y: 80 }}
            initialSize={{ width: 800, height: 800 }}
            bounds="window"
            headerRender={() => (
              <CustomComponent
              message="Lorem ipsum dolor sit amet"
                onClick={() => alert("custom component click handler")}
              />
            )}
          >
            <div style={{ color: "green", fontSize: "14px", textAlign: "left" }}>
              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>

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

export default App;
