"use client";
import React from "react";
import { Strip, StripEvent } from "./component/Strip";
import { Button, Container, Divider, Stack } from "@mui/material";

function random(min: number, max: number, floor: boolean = true) {
  const value = Math.random() * (max - min + 1) + min;
  return floor ? Math.floor(value) : value;
}

export default function Home() {
  function onStripEvent(event: StripEvent) {
    console.log(event);
  }
  const physicalBuses = 5;
  const virtualBuses = 3;
  const strips = physicalBuses + virtualBuses;

  return (
    <Container fixed maxWidth="xl" sx={{ height: "100%" }}>
      <Stack direction={"row"}>
        {[...Array(strips)].map((_v, i) => (
          <React.Fragment
            key={`${i < physicalBuses ? "a" : "b"}${
              i < physicalBuses ? i : i - physicalBuses
            }`}
          >
            {i === physicalBuses ? (
              <Divider
                orientation="vertical"
                variant="middle"
                sx={{ margin: "5px" }}
              />
            ) : (
              ""
            )}
            <Strip
              onChange={(ev) => onStripEvent(ev)}
              physicalBuses={physicalBuses}
              virtualBuses={virtualBuses}
            />
          </React.Fragment>
        ))}
      </Stack>

      <Button></Button>
    </Container>
  );
}