import React, { useState, useEffect } from 'react'
import { 
    Input, 
    InputGroup, 
    InputLeftElement, InputRightElement,
    InputRightAddon,
    Select,
    Spinner
 } from '@chakra-ui/react'
 import { CheckIcon } from '@chakra-ui/icons'
//  import { debounce } from 'utils'

const OrderSearchBar = ({ searchFilters, setSearchFilters, status, STATUSES } : any) => {
    const [searchQuery, setSearchQuery] = useState("")
    const [searchBy, setSearchBy] = useState(searchFilters.by)

    const handleInputChange = (e: any) => {
        const { currentTarget: { value } } = e
        console.log(value)
        // const trimmedValue = value.toLowerCase()
        // if (trimmedValue.length) {
            setSearchFilters({by: searchBy, query: value.toLowerCase() });
        // }
        setSearchQuery(value)
    }

    const handleSelectChange = (e: any) => {
        const { currentTarget: { value } } = e
        setSearchBy(value)
    }


    const boolToBin = (value: any) => Boolean(value) ? 1 : 0

    return (
        <>
            <InputGroup>
                <InputLeftElement
                    pointerEvents="none"
                    children={<Spinner size="xs" color="gray.300" opacity={boolToBin(status == STATUSES.FETCHING)} />}
                />
                <Input 
                    placeholder="Search ..."
                    // variant="filled"
                    // focusBorderColor="telegram.400"
                    value={searchQuery} 
                    onChange={handleInputChange}
            
                />
            </InputGroup>
            <Select maxWidth="10rem" defaultValue="customerEmailAddress" onChange={handleSelectChange}>
                <option value="id">Order #</option>
                <option value="customerEmailAddress">Email</option>
                <option value="orderTrackingCode">Tracking #</option>
            </Select>
        </>
        
    ) 
}

export default OrderSearchBar