"use client";

import { useState } from 'react';
import { Col, Card, Tabs, Tab, Button, Modal } from 'react-bootstrap';
import { Register } from '@/utils/register_parser';
import { renderAccess } from './RegisterBrowser';
import Link from "next/link";
import { Wikipedia, Link45deg, CodeSlash } from 'react-bootstrap-icons';

/**
 * A client-side component that displays the details of a single register.
 * @param register The register object to display.
 * @returns A React component that displays the register details.
 */
export default function RegisterDetail({
  register,
}: {
  register: Register;
}) {
  const [showSource, setShowSource] = useState(false);

  return (
      <Col key={register.hex_address} xs={12} className="mb-4">
        <Card>
          <Card.Header>
            <code>{register.hex_address}</code> ( {register.dec_address} ) &nbsp;
              <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issues 4 &amp; 5 Only</span>}
            <div className="float-end small text-muted">
              <Link href={register.wiki_link} className="text-decoration-none btn btn-sm btn-primary" title="Open wiki">
                <Wikipedia />
              </Link>
              &nbsp;
              <Link href={`/registers/${register.hex_address}`} className="text-decoration-none btn btn-sm btn-primary" title="Permalink">
                <Link45deg />
              </Link>
              &nbsp;
              <Button variant="primary" size="sm" className="text-decoration-none" onClick={() => setShowSource(true)} title="View source">
                <CodeSlash />
              </Button>
            </div>
          </Card.Header>
          <Card.Body>
            { register.modes.map((mode, idx) => (
                  <div key={idx} className={idx > 0 ? 'mt-4' : ''}>
                    <div>
                      {mode.modeName?.length && (
                        <h5 className="mb-3">{mode.modeName}</h5>
                      )}
                      <Tabs id={`register-tabs-${register.hex_address}-${idx}`}>
                        {mode.common && <Tab eventKey="common" title="Read/Write">{renderAccess(mode.common, register.notes)}</Tab>}
                        {mode.read && <Tab eventKey="read" title="Read">{renderAccess(mode.read, register.notes)}</Tab>}
                        {mode.write && <Tab eventKey="write" title="Write">{renderAccess(mode.write, register.notes)}</Tab>}
                      </Tabs>
                    </div>
                    {mode.text && mode.text.length > 0 && (
                      <div className="mt-3">
                        <h6>Mode Notes:</h6>
                        <pre>{mode.text}</pre>
                      </div>
                    )}
                  </div>
            ))}
            {register.notes && register.notes.map((note, index) => (
                <p key={index} className="small text-muted"><span className="footnote-anchor">{note.ref}</span> {note.text}</p>
            ))}
            {register.text && register.text.length > 0 && (
                <div className="mt-3">
                  <h6>Notes:</h6>
                  <pre>{register.text}</pre>
                </div>
            )}
          </Card.Body>
        </Card>

        <Modal show={showSource} onHide={() => setShowSource(false)} size="xl" centered scrollable>
          <Modal.Header closeButton>
            <Modal.Title>Source: {register.name} [{register.hex_address}]</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <pre className="mb-0">
              {register.source && register.source.length > 0 ? (
                register.source.map((line, index) => (
                  <span key={index}>{line}<br/></span>
                ))
              ) : (
                <em>No source available.</em>
              )}
            </pre>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={() => setShowSource(false)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </Col>
  );
}
