import { createSignal, For, Switch, Match } from "solid-js";
import { FlatGravitySystem } from "./systems/flat_gravity";
import { FlatGravityView, ViewConfig as FlatGravityViewConfig } from "./systems/flat_gravity_solid";
import { SimpleKinematicsSystem } from "./systems/simple_kinematics";
import { SimpleKinematicsView } from "./systems/simple_kinematics_solid";

const systemIds = [
  "simple-kinematics",
  "flat-gravity",
] as const;
export type SystemId = (typeof systemIds)[number];

const defaultSystemId: SystemId = "flat-gravity";

const systemToLabel: Record<SystemId, string> = {
  "simple-kinematics": "Simple Kinematics",
  "flat-gravity": "Flat Gravity",
};

export function FlatGravityHost() {
  const flatGravity = FlatGravitySystem({
    dt: 16,
    topLeft: { x: 200, y: 200 },
    bottomRight: { x: 600, y: 600 },
    maxSpeed: 100 / 1000,

    countSmall: 200,
    countBig: 3,
    massRangeSmall: { min: 0.1, max: 0.5 },
    massRangeBig: { min: 200.0, max: 300.0 },
  });

  const viewConfig: FlatGravityViewConfig = {
    massRange: { min: 0, max: 300 },
    radiusRange: { min: 2, max: 20 },
    expectedNetMass: 20000,
  };

  return <FlatGravityView system={flatGravity} viewConfig={viewConfig} />;
}

export function SimpleKinematicsHost() {
  const simpleKinematics = SimpleKinematicsSystem({
    dt: 4,
    count: 500,
    topLeft: { x: 200, y: 200 },
    bottomRight: { x: 400, y: 400 },
    maxSpeed: 200 / 1000,
  });

  return <SimpleKinematicsView system={simpleKinematics} />;
}


function SystemView(props: { systemId: SystemId }) {
  return (
    <Switch fallback={<div>Select a system</div>}>
      <Match when={props.systemId === "flat-gravity"}>
        <FlatGravityHost />
      </Match>
      <Match when={props.systemId === "simple-kinematics"}>
        <SimpleKinematicsHost />
      </Match>
    </Switch>
  );
}

export function App() {
  const [systemId, setSystemId] = createSignal<SystemId>(defaultSystemId);

  return (
    <div style="display: flex; flex-direction: column; height: 100vh;">
      <header class="top-nav">
        <div style="display: flex; align-items: center; gap: 8px;">
          <label for="system-select">System:</label>
          <select 
            id="system-select"
            class="system-dropdown"
            value={systemId()} 
            onInput={ e => setSystemId(e.currentTarget.value as SystemId) }
          >
            <For each={ systemIds }>
              { (id) => (
                <option value={id}>{ systemToLabel[id] }</option>
              ) }
            </For>
          </select>
        </div>
      </header>

      <main>
        <SystemView systemId={systemId()} />
      </main>
    </div>
  );
}

