import { useCallback, useState } from "react";
import type { ImportOptions } from "../../types/api";

export type ImportBarProps = {
  onSubmit: (opts: ImportOptions) => void;
};

export default function ImportBar({ onSubmit }: ImportBarProps) {
  const [formData, setFormData] = useState<ImportOptions>({ mode: 'import' });

  
  const handleSubmit = useCallback((e: React.FormEvent) => {
    e.preventDefault();



    onSubmit(formData);
  }, [formData, onSubmit]);

  const changeMode = useCallback((mode: ImportOptions['mode']) => {
    if (mode === 'add') {
      setFormData({ ...formData, mode });
    }

    else {
      setFormData({ mode });
    }
  }, [formData, setFormData]);

  return (
    <form onSubmit={handleSubmit}>
      <div className="field">
        <label className="label">Import mode</label>
        <div className="control">
          <div className="buttons has-addons is-left">
            <button 
              type="button"
              className={`button ${formData.mode === 'import' ? "is-primary is-selected" : ""}`}
              onClick={() => changeMode('import')}>Import</button>
            <button 
              type="button"
              className={`button ${formData.mode === 'add' ? "is-primary is-selected" : ""}`}
              onClick={() => changeMode('add')}>Add</button>
          </div>
        </div>
      </div>

      {formData.mode === 'add' && <div className="field">
        <label className="label">Additional options</label>
        <div className="control">
          <label className="checkbox">
            <input 
              type="checkbox" 
              checked={formData.learnCategories}
              onChange={e => setFormData({ ...formData, learnCategories: e.target.checked})}/> Learn categories
          </label>          
        </div>
        <div className="control">
          <label className="checkbox">
            <input 
              type="checkbox" 
              checked={formData.runTransfers}
              onChange={e => setFormData({ ...formData, runTransfers: e.target.checked})}/> Run transfers
          </label>
        </div>
      </div>}

      <div className="field mt-5">
        <div className="control">
          <button 
            type="submit" 
            className="button is-link is-fullwidth">Submit transactions</button>
        </div>
      </div>
    </form>
  ); 
}