"use client";

import { Container, Row, Col, Card, Tabs, Tab } from 'react-bootstrap';
import { Register } from './types';
import { renderAccess } from './RegisterBrowser';

/**
 * A client-side component that displays the details of a single register.
 * @param register The register object to display.
 * @param defaultActiveKey The default active tab to display.
 * @returns A React component that displays the register details.
 */
export default function RegisterDetailClient({
  register,
  defaultActiveKey,
}: {
  register: Register;
  defaultActiveKey?: string;
}) {
  return (
    <Container fluid className="py-4">
      <Row>
        <Col xs={12}>
          <Card>
            <Card.Header>
              <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address}){' '}
              {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
            </Card.Header>
            <Card.Body>
              {defaultActiveKey ? (
                <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
                  {register.common && (
                    <Tab eventKey="common" title="Read/Write">
                      {renderAccess(register.common)}
                    </Tab>
                  )}
                  {register.read && (
                    <Tab eventKey="read" title="Read">
                      {renderAccess(register.read)}
                    </Tab>
                  )}
                  {register.write && (
                    <Tab eventKey="write" title="Write">
                      {renderAccess(register.write)}
                    </Tab>
                  )}
                </Tabs>
              ) : null}
              {register.notes.map((note, index) => (
                <p key={index} className="small text-muted">
                  {note.ref} {note.text}
                </p>
              ))}
              {register.text && register.text.length > 0 && (
                <div className="mt-3">
                  <h5>Notes:</h5>
                  <pre>{register.text}</pre>
                </div>
              )}
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}