import * as React from 'react' ; import styled from 'styled-components' ; import { useDebouncedCallback } from 'use-debounce' ; import DateFilter from './Date' ; import FilterRow from './Row' ; import { IncidentFilterState } from '../../../../store/incidents' ; import { SetIncidentFilterParams } from '../../../../store/incidents/actions' ; import { Timestamp } from '../../../../helpers/firebase' ; import DistanceFilter from './Distance' ; interface DrawerFilter { filters : IncidentFilterState ; setFilter : ( params : SetIncidentFilterParams ) => void ; } const Container = styled . div `
  width: 100%;
  height: auto;
` ; const DrawerFilter = ( { filters , setFilter , } ) => { const setStartDate = ( value ? ) => { setFilter ( { values : { startDate : value } } ) ; } ; const setEndDate = ( value ? ) => { setFilter ( { values : { endDate : value } } ) ; } ; const [ setDistance ] = useDebouncedCallback ( ( distance ? ) => { setFilter ( { values : { distance } } ) ; } , 200 ) ; const clearFilters = ( { ignoreFields , } ) => { const newFilters = { ... filters , } ; Object . keys ( newFilters ) . forEach ( key => { if ( ignoreFields && ! ignoreFields . includes ( key as keyof IncidentFilterState ) ) { delete newFilters [ key ] ; } else { delete newFilters [ key ] ; } } ) ; setFilter ( { values : newFilters , merge : false } ) ; } ; const onDateRowOpenChange = ( open ) => { if ( ! open && Boolean ( filters . startDate || filters . endDate ) ) { clearFilters ( { ignoreFields : [ 'search' ] } ) ; } } ; const onNearbyRowOpenChange = ( open ) => { if ( ! open && filters . distance ) { setFilter ( { values : { distance : undefined , } , } ) ; } } ; return ( < Container > < FilterRow overrideOpen = { Boolean ( filters . startDate || filters . endDate ) } title = "Date" content = { < DateFilter startDate = { filters . startDate } endDate = { filters . endDate } setStartDate = { setStartDate } setEndDate = { setEndDate } / > } onOpenChange = { onDateRowOpenChange } / > < FilterRow overrideOpen = { Boolean ( filters . distance ) } onOpenChange = { onNearbyRowOpenChange } title = "Nearby" content = { < DistanceFilter distance = { filters . distance } setDistance = { setDistance } / > } /> < /Container>); } ; export default DrawerFilter ;