import React, {useState, useEffect, useCallback} from 'react'
import {DropDownList, MultiSelect} from "@progress/kendo-react-dropdowns"
import {Button} from '@progress/kendo-react-buttons'
import { useHistory, useLocation } from "react-router-dom"
import { Popup } from "@progress/kendo-react-popup"


const Filter = () => {
    
    const history=useHistory()
    const location=useLocation()
    const [Standard,setStandard] = useState("All")
    const [Hobbies,setHobbies] = useState(["Playing"])
    const [Responsibility,setResponsibility] = useState("All")
    const [QueryString,setQueryString] = useState(location.search.substring(1))
    const [Show, setShow] = useState(false)

    const options={
        StandardList:["All","VI","VII","VIII"],
        HobbiesList: ["Playing", "Drawing","Swimming"],
        ResponsibilityList:["All","Monitor","Head","Sports Captain"]
    }

    const handleApply = ()=>{  
        if(!Hobbies.length )
        {
            setShow(true);
        }
        else{
            setQueryString(`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
        }  
    }

    useEffect(() => {
        var params= new URLSearchParams((QueryString)?(QueryString):`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
        history.push({search: params.toString()})
    }, [QueryString])

    return (
        <div>
            <label>Standard </label>
            <DropDownList data={options.StandardList} defaultValue={"All"} value={Standard} 
            onChange={(event)=>setStandard(event.target.value)}/> 

            <label > Hobbies </label>
            <MultiSelect data={options.HobbiesList} defaultValue={["Playing"]} value={Hobbies} onChange={(event)=>setHobbies([...event.value])}/>
        
            <label > Responsibility </label>
            <DropDownList data= {options.ResponsibilityList} defaultValue= {"All"} value={Responsibility} onChange={(event)=>setResponsibility(event.target.value)} />

            <Button id="submitFilter" type="button" onClick={handleApply} > Apply </Button>  

            <Popup show={Show} className={'backdrop'} popupClass={'popup-content'}>
                <div id="warning">
                    Please select the Hobbies filter
                </div>
                <div>
                    <Button id="ok" type="button" onClick={()=>setShow(false)}>
                        OK
                    </Button>
                </div>
            </Popup> 
        </div>
    )  
}

export default Filter

.backdrop {
  position: fixed;
  top: 0 !important;
  bottom: 0;
  left: 0 !important;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.1);
  display: none;
}

.popup-content {
  color: #787878;
  background-color: #f1f1f1 !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  height: 125px;
  width: 425px;
  border-radius: 3px;
  position: fixed;
  left: 530px;
  top: 0px
}