import { useState } from 'react';

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

import './MiscellaneousSection.css';

function MiscellaneousPanel({
  dsp,
  onConnect,
  onDisconnect,
  factoryReset,
  copyChannel,
  setInputSource,
  linkChannels,
  unlockDevice,
  lockDevice,
}: {
  dsp: DSP;
  onConnect: () => void;
  onDisconnect: () => void;
  factoryReset: (force: boolean) => Promise<boolean>;
  copyChannel: (channel1: Channel, channel2: Channel) => Promise<boolean>;
  setInputSource: (inputSource: InputSource) => Promise<boolean>;
  linkChannels: (source: Channel, destinations: Channel[]) => Promise<boolean>;
  unlockDevice: (password: string) => Promise<boolean>;
  lockDevice: (password: string) => Promise<boolean>;
}) {
  const [isFactoryResetting, setIsFactoryResetting] = useState(false);

  const statusLabel =
    dsp.status === 'connected'
      ? 'Connected'
      : dsp.status === 'connecting'
        ? 'Connecting…'
        : 'Disconnected';

  const handleFactoryReset = async () => {
    const confirmed = window.confirm(
      'Are you sure you want to factory reset this DSP? This cannot be undone.',
    );

    if (!confirmed) {
      return;
    }

    setIsFactoryResetting(true);

    try {
      await factoryReset(true);
    } finally {
      setIsFactoryResetting(false);
    }
  };

  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.status} />
            </span>

            <span
              className={`status-label status-label--${dsp.status}`}
            >
              {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">
          {dsp.status === 'connected' ? (
            <Button variant="outline" onClick={onDisconnect}>
              Disconnect
            </Button>
          ) : (
            <Button
              variant="primary"
              onClick={onConnect}
              disabled={dsp.status === 'connecting'}
            >
              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
            </Button>
          )}
        </div>

        <div className="miscellaneous-panel__actions">
          <Button
            variant="outline"
            onClick={handleFactoryReset}
            disabled={
              dsp.status !== 'connected' || isFactoryResetting
            }
          >
            {isFactoryResetting ? 'Resetting…' : 'Factory Reset'}
          </Button>
        </div>
      </Card>
    </div>
  );
}

export default MiscellaneousPanel;