import { useVizStore } from '../../store/useVizStore';

export function DateControls() {
  const mode = useVizStore((s) => s.mode);
  const setMode = useVizStore((s) => s.setMode);
  const date = useVizStore((s) => s.date);
  const setDate = useVizStore((s) => s.setDate);
  const rangeStart = useVizStore((s) => s.rangeStart);
  const rangeEnd = useVizStore((s) => s.rangeEnd);
  const setRange = useVizStore((s) => s.setRange);

  return (
    <div className="section">
      <h2>Time window</h2>
      <div className="toggle">
        <button className={mode === 'day' ? 'active' : ''} onClick={() => setMode('day')}>
          Single day
        </button>
        <button className={mode === 'range' ? 'active' : ''} onClick={() => setMode('range')}>
          Range
        </button>
      </div>
      {mode === 'day' ? (
        <div className="input-row">
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        </div>
      ) : (
        <>
          <div className="input-row">
            <input
              type="date"
              value={rangeStart}
              onChange={(e) => setRange(e.target.value, rangeEnd)}
            />
            <span>→</span>
            <input
              type="date"
              value={rangeEnd}
              onChange={(e) => setRange(rangeStart, e.target.value)}
            />
          </div>
          <p className="legend-note">Server caps range at 14 days.</p>
        </>
      )}
    </div>
  );
}