import React, { useState } from 'react';
import "../styles/legacy/SchoolFilters.legacy.css";
function SchoolFilters({ schools, setFilteredSchools }) {
  const [sortBy, setSortBy] = useState('tuition'); // Default: Sort by Tuition
  const [tuitionRange, setTuitionRange] = useState([0, 50000]); // Example range
  const [distanceRange, setDistanceRange] = useState([0, 200]); // Example range

  // Sorting function
  const sortSchools = (schools) => {
    return [...schools].sort((a, b) => {
      if (sortBy === 'tuition') return a.inState - b.inState;
      if (sortBy === 'distance') return a.distance - b.distance;
      return 0;
    });
  };

  // Filtering function
  const filterSchools = (schools) => {
    return schools.filter((school) =>
      school.inState >= tuitionRange[0] &&
      school.inState <= tuitionRange[1] &&
      school.distance >= distanceRange[0] &&
      school.distance <= distanceRange[1]
    );
  };

  // Apply sorting & filtering when values change
  const updateFilteredSchools = () => {
    let updatedSchools = sortSchools(schools);
    updatedSchools = filterSchools(updatedSchools);
    setFilteredSchools(updatedSchools);
  };

  // Effect to update results on change
  React.useEffect(() => {
    updateFilteredSchools();
  }, [sortBy, tuitionRange, distanceRange, schools]);

  return (
    <div className="filters-container">
      <h3>Sort & Filter Schools</h3>
      
      {/* Sorting Options */}
      <div className="sorting-options">
        <label>Sort by:</label>
        <div>
          <input
            type="radio"
            id="sortTuition"
            name="sort"
            value="tuition"
            checked={sortBy === 'tuition'}
            onChange={() => setSortBy('tuition')}
          />
          <label htmlFor="sortTuition">Tuition</label>
        </div>
        <div>
          <input
            type="radio"
            id="sortDistance"
            name="sort"
            value="distance"
            checked={sortBy === 'distance'}
            onChange={() => setSortBy('distance')}
          />
          <label htmlFor="sortDistance">Distance</label>
        </div>
      </div>

      {/* Filtering Options */}
      <div className="filtering-options">
        <label>Tuition Range: ${tuitionRange[0]} - ${tuitionRange[1]}</label>
        <input
          type="range"
          min="0"
          max="50000"
          step="500"
          value={tuitionRange[0]}
          onChange={(e) => setTuitionRange([Number(e.target.value), tuitionRange[1]])}
        />
        <input
          type="range"
          min="0"
          max="50000"
          step="500"
          value={tuitionRange[1]}
          onChange={(e) => setTuitionRange([tuitionRange[0], Number(e.target.value)])}
        />
      </div>

      <div className="filtering-options">
        <label>Distance Range: {distanceRange[0]} - {distanceRange[1]} mi</label>
        <input
          type="range"
          min="0"
          max="200"
          step="5"
          value={distanceRange[0]}
          onChange={(e) => setDistanceRange([Number(e.target.value), distanceRange[1]])}
        />
        <input
          type="range"
          min="0"
          max="200"
          step="5"
          value={distanceRange[1]}
          onChange={(e) => setDistanceRange([distanceRange[0], Number(e.target.value)])}
        />
      </div>
    </div>
  );
}

export default SchoolFilters;