import { DSP, isConnected } from '../../../../types';
import Button from '../../../../components/Button/Button';
import Card from '../../../../components/Card/Card';
import Led from '../../../../components/Led/Led';

import './ConnectionSection.css';

function ConnectionPanel({
  dsp,
  onConnect,
  onDisconnect,
}: {
  dsp: DSP;
  onConnect: () => void;
  onDisconnect: () => void;
}) {

    const statusLabel =
      isConnected(dsp)
        ? 'Connected'
        : dsp.isConnecting
          ? 'Connecting…'
          : 'Disconnected';
          
  return (
    <div className="connection-section">
      <Card className="connection-panel">
        <div className="connection-panel__header">
          <div className="connection-panel__header-text">
            <h1 className="connection-panel__title" title={dsp.name}>
              {dsp.name}
            </h1>

            <div className="connection-panel__type">{dsp.type}</div>
          </div>

          <div className="connection-panel__status">
            <span className="connection-panel__led">
              <Led status={dsp.isConnecting ? "connecting" : isConnected(dsp) ? "connected" : "disconnected"} />
            </span>

            <span>{statusLabel}</span>
          </div>
        </div>

        <dl className="connection-panel__specs">
          <div className="connection-panel__spec">
            <dt>IP address</dt>
            <dd className="connection-panel__mono" title={dsp.ip}>
              {dsp.ip}
            </dd>
          </div>

          <div className="connection-panel__spec">
            <dt>Port</dt>
            <dd className="connection-panel__mono">{dsp.port}</dd>
          </div>

          <div className="connection-panel__spec">
            <dt>Device ID</dt>
            <dd className="connection-panel__mono" title={String(dsp.deviceId) || undefined}>
              {dsp.deviceId || '—'}
            </dd>
          </div>
        </dl>

        <div className="connection-panel__actions">
          {isConnected(dsp) ? (
            <Button variant="outline" onClick={onDisconnect}>
              Disconnect
            </Button>
          ) : (
            <Button variant="primary" onClick={onConnect} disabled={dsp.isConnecting}>
              {dsp.isConnecting ? 'Connecting…' : 'Connect'}
            </Button>
          )}
        </div>
      </Card>
    </div>
  );
}

export default ConnectionPanel;