'use client';

import { useState } from 'react';
import { Register, RegisterAccess, Note } from '@/utils/register_parser';
import { Form, Container, Row, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
import RegisterDetail from "@/app/registers/RegisterDetail";

interface RegisterBrowserProps {
  registers: Register[];
}

/**
 * Renders the access details for a register, including its description, operations, and notes.
 * @param access The register access data to render.
 * @param extraNotes Non access footnotes to include in the tooltip.
 * @returns A React component that displays the register access details.
 */
export function renderAccess(access: RegisterAccess, extraNotes: Note[] = []) {
  const renderTooltip = (notes: Note[]) => (
    <Tooltip id="tooltip">
      {notes.map((note, index) => (
        <div key={index}><code>{note.ref}</code> {note.text}</div>
      ))}
    </Tooltip>
  );

  return (
    <>
      {access.description && <pre>{access.description}</pre>}
      {access.operations.length > 0 &&
        <Table striped bordered hover size="sm" className="bits-table">
          <thead>
            <tr>
              <th>Bits</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {access.operations.map((op, index) => {
              const access_notes = access.notes.filter(note => note.ref === op.footnoteRef);
              const extra_notes = extraNotes.filter(note => note.ref === op.footnoteRef);

              const notes = [...access_notes, ...extra_notes].filter(note => note.text.length > 0);

              return (
                <tr key={index}>
                  <td>{op.bits}</td>
                  <td>
                    {op.description}
                    {op.footnoteRef && notes.length > 0 && (
                      <OverlayTrigger placement="top" overlay={renderTooltip(notes)}>
                          <span className="footnote-ref">{op.footnoteRef}</span>
                      </OverlayTrigger>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      }
      {access.notes.map((note, index) => (
        <p key={index} className="small text-muted">{note.ref} {note.text}</p>
      ))}
    </>
  );
}

/**
 * A component for browsing and searching through a list of registers.
 * @param registers An array of Register objects to display.
 * @returns A React component that allows users to browse and search registers.
 */
export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredRegisters = registers.filter(register =>
    register.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    register.description.toLowerCase().includes(searchTerm.toLowerCase())
  );


  return (
    <Container fluid>
      <Form.Group className="mb-3">
        <Form.Control
          type="text"
          placeholder="Search registers..."
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
      </Form.Group>
      <Row>
        {filteredRegisters.map(register => (
              <RegisterDetail key={register.hex_address} register={register} />
        ))}
      </Row>
    </Container>
  );
}