import Head from 'next/head'
import Link from 'next/link'
import Form from 'react-bootstrap/Form';
import Table from 'react-bootstrap/Table'
import { useState } from 'react';
import Image from 'next/image'
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 Button from 'react-bootstrap/Button';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import { ProgramContext } from '../src/ProgramContext';
export default function Home() {
const router = useRouter();
const { updateProgram } = useContext(ProgramContext);
const handleClick = () => {
const program = { name: 'John', age: 25 };
updateProgram(program);
router.push('/runner');
};
const [instructionList, setInstructionList] = useState([]);
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>Instructions</h3>
</Col>
<Col className="text-end">
<Button className="ms-4" variant="primary" onClick={handleClick}>Execute</Button>
</Col>
</Row>
<Row className="mb-3">
<Col>
<Form.Control
className="form-control-sm"
type="number"
placeholder="Select number of instructions"
/>
</Col>
</Row>
<Row className="row my-4">
<Col>
<Table bordered hover>
<thead>
<tr>
<th>Op</th>
<th>RD</th>
<th>RS</th>
<th>RT</th>
</tr>
</thead>
<tbody>
{instructionList.map((instr, index) => (
<tr>
<td>{`${instr.instrucao.operacao} ${instr.instrucao.registradorR} ${instr.instrucao.registradorS} ${instr.instrucao.registradorT}`}</td>
<td>
<option value="">Operand</option>
<option value="ADD">ADD</option>
<option value="ADDD">ADDD</option>
<option value="BEQ">BEQ</option>
<option value="BNEZ">BNEZ</option>
<option value="DADDUI">DADDUI</option>
<option value="DIVD">DIVD</option>
<option value="LD">LD</option>
<option value="MULTD">MULTD</option>
<option value="SD">SD</option>
<option value="SUBD">SUBD</option>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={r}
id={r}
size="3"
maxLength="3"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={s}
id={s}
size="3"
maxLength="5"
/>
</td>
<td>
<Form.Control
className="form-control"
type="text"
name={t}
id={t}
size="3"
maxLength="3"
/>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
</Container>
</main>
</>
)
}