import Search from './Search'
import { useEffect, useState } from 'react';
import { categories, work_from_home, employment_types } from '../consts';
import propTypes from 'prop-types';
import Selector from './Selector';
const Filter = (props) => {
    useEffect(() => {
      console.log(props.searchQuery)
    }, [props.searchQuery]);


    const handle_checked_change = (e) => {
      const { name, value, checked } = e.target;
      props.setSearchQuery(prevState => {
        const newArray = checked 
          ? [...(prevState[name] || []), value]
          : (prevState[name] || []).filter(item => item !== value);
        return { ...prevState, [name]: newArray };
      });
    }
    


  return (
    // idea - make the page whole page grayed out and only the filter is visible
    <div className={`z-10 bg-dimWhite collapsible px-3 sm:px-4 ${!props.isOpen ? '' : 'expanded border-4'}`}>
    <div className='grid grid-cols-2 sm:grid-cols-3 mb-2'>
    <div className='hidden sm:block'></div>
    <p className='mx-auto mt-3 text-center font-poppins font-semibold text-xl text-gray-600'>Filtry</p>
  
    <button className='rounded-xl mt-4 ph-6 w-32 bg-slate-400 hover:bg-slate-600 duration-100 ' onClick={props.clearSearchQuery}>
      <span className='p-2 text-sm font-bold text-center font-poppins text-white'>Wyczyść filtry</span>
      </button>
    </div>
    
    <Search label='Wyszukaj ogłoszenie' 
    placeholder='Wpisz nazwę stanowiska...'
    name='name'
    setSearchQuery={props.setSearchQuery}
    _type='text' 
    value={props.searchQuery.name || ''}/>
    <Search label='Lokalizacja'
    placeholder='Wpisz lokalizację...'
    name='localization' 
    _type='text'
    setSearchQuery={props.setSearchQuery} 
    value={props.searchQuery.localization || ''} />
    <Search label='Min. wynagrodzenie'
    placeholder='Wpisz kwotę minimalną...' 
    name='min_salary'
    _type='text'
    setSearchQuery={props.setSearchQuery}
    value={props.searchQuery.min_salary || '' } />
    <Search label='Max. wynagrodzenie'
    placeholder='Wpisz kwotę maksymalną...'
    name='max_salary' 
    setSearchQuery={props.setSearchQuery} 
    _type='text'
    value={props.searchQuery.max_salary || ''}/>
    <Selector value_to_map_from={categories}  name='Kategorie' inputname='categories' onChange={handle_checked_change} state={props.searchQuery || {} }/>
    <Selector value_to_map_from={work_from_home} s name='Praca zdalna' inputname='work_from_home' state={props.searchQuery || {}} onChange={handle_checked_change}/>
    <Selector value_to_map_from={employment_types} name='Typ kontraktu' inputname='employment' state={props.searchQuery || {}} onChange={handle_checked_change} />

    <button className='bg-gray-600 text-white py-1 sm:py-3 px-12 col-span-2 mx-auto rounded-md font-semibold text-xl hover:bg-gray-500 duration-150 my-3 sm:my-5 sm:min-h-full'
    onClick={props.onClick}
    >
    Filtruj
    </button>
    </div>
  )
};

Filter.propTypes = {
  isOpen: propTypes.bool,
  searchQuery: propTypes.object,
  setSearchQuery: propTypes.func,
  categories: propTypes.array,
  clearSearchQuery: propTypes.func,
  onClick: propTypes.func
};

Filter.defaultProps = {
  searchQuery: {
    categories: [],
    work_from_home: [],
    employment: []
  }
};

export default Filter;