import Head from 'next/head'
import Image from 'next/image'
import Table from 'react-bootstrap/Table'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
export default function Home() {
const [clock, setClock] = useState(0);
const [instructionStatus, setInstructionStatus] = useState([]);
const [reservationStations, setReservationStations] = useState([]);
const [registerStatus, setRegisterStatus] = useState([]);
function issueInstruction() {
}
function executeInstruction() {
}
function writeInstruction() {
}
function nextCycle() {
setClock(clock + 1);
issueInstruction();
executeInstruction();
writeInstruction();
}
return (
<>
<Head>
<title>Tomasulo</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</Head>
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="/">Tomasulo</Navbar.Brand>
</Container>
</Navbar>
<main>
<Container>
<Row className="row my-4">
<Col>
<h3>Ciclos: {clock}</h3>
</Col>
<Col className="text-end">
<Button className="ms-4" variant="primary" onClick={nextCycle}>Próximo</Button>
</Col>
</Row>
<Row className="row my-4">
<Col>
<div className="my-4">
<h3>Instruction Status</h3>
</div>
<Table bordered hover>
<thead>
<tr>
<th>Instruction</th>
<th>Issued</th>
<th>Execute</th>
<th>Write Result</th>
</tr>
</thead>
<tbody>
{instructionStatus.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
</Col>
<Col>
<div className="my-4">
<h3>Reorder Buffer</h3>
</div>
<Table bordered hover>
<thead>
<tr>
<th>Entry</th>
<th>Busy</th>
<th>Instruction</th>
<th>State</th>
<th>Destination</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{instructionStatus.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
<Row className="row my-4">
<Col>
<div className="my-4">
<h3>Reservation Stations (Load/Store)</h3>
</div>
<Table bordered hover>
<thead>
<tr>
<th>Time</th>
<th>Busy</th>
<th>Op</th>
<th>Vj</th>
<th>Vk</th>
<th>Qj</th>
<th>Qk</th>
<th>A</th>
</tr>
</thead>
<tbody>
{reservationStations.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
</Col>
<Col>
<div className="my-4">
<h3>Reservation Stations</h3>
</div>
<Table bordered hover>
<thead>
<tr>
<th>Name</th>
<th>Busy</th>
<th>Op</th>
<th>Vj</th>
<th>Vk</th>
<th>Qj</th>
<th>Qk</th>
<th>A</th>
</tr>
</thead>
<tbody>
{reservationStations.map((instr, index) => (
<tr>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
<td>batata</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
<div className="my-4">
<h3>Registers Status</h3>
</div>
<Table bordered hover>
<thead>
<tr>
<th>Field</th>
<th>F0</th>
<th>F1</th>
<th>F2</th>
<th>F3</th>
<th>F4</th>
<th>F5</th>
<th>F6</th>
<th>F7</th>
<th>F8</th>
<th>F9</th>
<th>F10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Reorder #</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Busy</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</Table>
<div className="mt-auto text-center">
<span className="text-muted">Caio Arâes, David Freitas, Guilherme Werner</span>
</div>
</Container>
</main>
</>
)
}