import { createEffect, createSignal } from "solid-js";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";
import { DisplayInfo } from './models/display-info.model';
import { DisplayInfoPanel } from './components/display-info-panel';

function App() {
  const [screenshots, setScreenshots] = createSignal<string[]>([]);
  const [displays, setDisplays] = createSignal<DisplayInfo[]>([]);

  createEffect(() => {
    invoke<string>('list_display_info').then((displays) => {
      setDisplays(JSON.parse(displays));
    });
  });

  createEffect(() => {
    take_all_display_screenshot();
  }, [displays]);

  async function take_all_display_screenshot() {
    console.log('take_all_display_screenshot');
    displays().forEach((display) => {
      invoke<string>('take_screenshot', {
        displayId: display.id,
        scaleFactor: display.scale_factor,
      }).then((image) => {
        setScreenshots((screenshots) => [...screenshots, image]);
      });
    });
  }

  return (
    <div class="container">
      <ol>
        {displays().map((display) => {
          return (
            <li>
              <DisplayInfoPanel display={display} />
            </li>
          );
        })}
      </ol>
      <ol>
        {screenshots().map((screenshot) => {
          return (
            <li>
              <img
                style="object-fit: contain; height: 400px; width: 600px"
                src={screenshot}
              />
            </li>
          );
        })}
      </ol>
    </div>
  );
}

export default App;