import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch } from '../../app/hooks';
import DataUtils, { type SearchResults } from '../data/DataUtils';
import { setTitle } from '../page-title/pageTitleSlice';
import { setResults } from '../search-results/searchResultsSlice';
import styles from './SearchForm.module.css';

const SearchForm: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const [pdStart, setPdStart] = useState('44');
  const [pdEnd, setPdEnd] = useState('100');
  const [widthMin, setWidthMin] = useState('317');
  const [widthMax, setWidthMax] = useState('512');
  const [depthMin, setDepthMin] = useState('90');
  const [depthMax, setDepthMax] = useState('230');
  const [cellType, setCellType] = useState('any');
  const [area, setArea] = useState('all');
  const [geneType, setGeneType] = useState('all');
  const [keyword, setKeyword] = useState('');

  useEffect(() => {
    dispatch(setTitle('Database Search'));
  }, [dispatch]);

  const doSearch = (): SearchResults => {
    const toNumber = (v: string): number => parseInt(v.trim(), 10);
    const params = {
      pdStart: toNumber(pdStart),
      pdEnd: toNumber(pdEnd),
      widthMin: toNumber(widthMin),
      widthMax: toNumber(widthMax),
      depthMin: toNumber(depthMin),
      depthMax: toNumber(depthMax),
      cellType: cellType.trim(),
      area: area.trim(),
      geneType: geneType.trim(),
      keyword: keyword.trim(),
    };
    return DataUtils.search(params);
  };

  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    const { name, value } = event.target;
    switch (name) {
      case 'pdStart':
        setPdStart(value);
        break;
      case 'pdEnd':
        setPdEnd(value);
        break;
      case 'widthMin':
        setWidthMin(value);
        break;
      case 'widthMax':
        setWidthMax(value);
        break;
      case 'depthMin':
        setDepthMin(value);
        break;
      case 'depthMax':
        setDepthMax(value);
        break;
      case 'cellType':
        setCellType(value);
        break;
      case 'keyword':
        setKeyword(value);
        break;
    }
  };

  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
    const { name, value } = event.target;
    switch (name) {
      case 'area':
        setArea(value);
        break;
      case 'geneType':
        setGeneType(value);
        break;
    }
  };

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();
    const results = doSearch();
    dispatch(setResults(results));
    navigate('/search/results');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className={styles.formGroup}>
        <label htmlFor="pdStart">Postnatal Days</label>
        <div className={styles.value}>
          <input
            type="number"
            name="pdStart"
            className={styles.txtParam}
            value={pdStart}
            onChange={handleInputChange}
          />
          <span className={styles.range}>-</span>
          <input type="number" name="pdEnd" className={styles.txtParam} value={pdEnd} onChange={handleInputChange} />
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="widthMin">Recording volume width (height)</label>
        <div className={styles.value}>
          <input
            type="number"
            name="widthMin"
            className={styles.txtParam}
            value={widthMin}
            onChange={handleInputChange}
          />
          <span className={styles.range}>-</span>
          <input
            type="number"
            name="widthMax"
            className={styles.txtParam}
            value={widthMax}
            onChange={handleInputChange}
          />
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="depthMin">Recording volume depth</label>
        <div className={styles.value}>
          <input
            type="number"
            name="depthMin"
            className={styles.txtParam}
            value={depthMin}
            onChange={handleInputChange}
          />
          <span className={styles.range}>-</span>
          <input
            type="number"
            name="depthMax"
            className={styles.txtParam}
            value={depthMax}
            onChange={handleInputChange}
          />
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="cellType">Cell type (E, I, G, P, S, or "any")</label>
        <div className={styles.value}>
          <input
            type="text"
            name="cellType"
            className={styles.txtParamStr}
            value={cellType}
            onChange={handleInputChange}
          />
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="area">Target area</label>
        <div className={styles.value}>
          <select name="area" className={styles.selParam} value={area} onChange={handleSelectChange}>
            <option value="all">All</option>
            <option value="L2/3, V1">L2/3 in the visual cortex</option>
          </select>
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="geneType">Mouse line</label>
        <div className={styles.value}>
          <select name="geneType" className={styles.selParam} value={geneType} onChange={handleSelectChange}>
            <option value="all">All</option>
            <option value="VGAT-Venus">VGAT-Venus</option>
            <option value="PV/myrGFP-LDLRct">PV/myrGFP-LDLRct</option>
            <option value="Dlx5/6-GCaMP3">Dlx5/6-GCaMP3</option>
          </select>
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="keyword">Keyword Search</label>
        <div className={styles.value}>
          <input
            type="text"
            name="keyword"
            className={styles.txtKeyword}
            value={keyword}
            onChange={handleInputChange}
          />
        </div>
      </div>
      <div className={styles.formGroup}>
        <div className={styles.submit}>
          <input type="submit" value="Search" />
        </div>
      </div>
    </form>
  );
};

export default SearchForm;
