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

import './AddDspPage.css';

function AddDSPForm({
  onCancel,
  onAdd,
}: {
  onCancel: () => void;
  onAdd: (d: Omit<DSP, 'status' | 'id' | 'state' | 'meters'>) => 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 (
    <Card>
      <div className="add-dsp-form__header">
        <h1 className="add-dsp-form__title">Add DSP</h1>
        <p className="add-dsp-form__hint">Register a new device to control from this app.</p>
      </div>

      <div className="add-dsp-form__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="add-dsp-form__row">
        <div className="add-dsp-form__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="add-dsp-form__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="add-dsp-form__row">
        <div className="add-dsp-form__field">
          <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="add-dsp-form__field">
          <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="add-dsp-form__actions">
        <Button variant="ghost" onClick={onCancel}>
          Cancel
        </Button>

        <Button variant="primary" onClick={submit} disabled={!canSubmit}>
          Add DSP
        </Button>
      </div>
    </Card>
  );
}

export default AddDSPForm;