import { useState } from 'react';
import { DSP, DSP_TYPES } from '../../types/types';

function AddDSPForm({
  onCancel,
  onAdd,
}: {
  onCancel: () => void;
  onAdd: (d: Omit<DSP, 'status' | 'id'>) => void;
}) {
  const [form, setForm] = useState({
    name: '',
    type: DSP_TYPES[0].name,
    ip: '192.168.1.100',
    port: DSP_TYPES[0].defaultPort,
    deviceId: '1',
  });

  const canSubmit =
    form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId.length > 0;

  function submit() {
    if (!canSubmit) return;
    onAdd({
      ...form,
    });
  }

  return (
    <div className="card form-card">
      <div className="form-header">
        <h1 className="panel-title">Add DSP</h1>
        <p className="form-hint">Register a new device to control from this app.</p>
      </div>

      <div className="field">
        <label htmlFor="f-name">Name</label>
        <input
          id="f-name"
          placeholder="Main Room DSP"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
        />
      </div>

      <div className="field-row">
        <div className="field">
          <label htmlFor="f-type">Model</label>
          <select
            id="f-type"
            value={form.type}
            onChange={(e) => {
              const selected = DSP_TYPES.find((d) => d.name === e.target.value);

              setForm({
                ...form,
                type: e.target.value,
                port: selected?.defaultPort ?? form.port,
              });
            }}
          >
            {DSP_TYPES.map((dsp) => (
              <option key={dsp.name} value={dsp.name}>
                {dsp.name}
              </option>
            ))}
          </select>
        </div>

        <div className="field">
          <label htmlFor="f-deviceid">Device ID</label>
          <input
            id="f-deviceid"
            className="mono"
            type="number"
            min={1}
            max={255}
            step={1}
            placeholder="1"
            value={form.deviceId}
            onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
          />
        </div>
      </div>

      <div className="field-row">
        <div className="field field--grow">
          <label htmlFor="f-ip">IP address</label>
          <input
            id="f-ip"
            className="mono"
            value={form.ip}
            onChange={(e) => setForm({ ...form, ip: e.target.value })}
          />
        </div>

        <div className="field field--narrow">
          <label htmlFor="f-port">Port</label>
          <input
            id="f-port"
            className="mono"
            type="number"
            value={form.port}
            onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
          />
        </div>
      </div>

      <div className="form-actions">
        <button className="btn btn-ghost" onClick={onCancel}>
          Cancel
        </button>
        <button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
          Add DSP
        </button>
      </div>
    </div>
  );
}

export default AddDSPForm;
