import React, { useState } from 'react'; 
import { Input, Space } from 'antd'; 
import {SearchOutlined } from '@ant-design/icons';
import Highlighter from "react-highlight-words";
import { Button } from "../modules/components"; 

export const tblSearchColumn = () => { 
    const [searchText, setSeacrhText]           = useState("");
    const [searchedColumn, setSearchedColumn]   = useState([]);
 
    const buscarColumnaProps = (dataIndex:any) => ({ 
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }:any, e:any) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => { }}
                    placeholder={`Buscar ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    style={{ width: 188, marginBottom: 8, display: 'block' }}
                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                    autoFocus={true}
                /> 
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Buscar
                    </Button>
                    <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        Resetear
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: (filtered:any) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value:any, record:any) =>
            record[dataIndex]
            ?    
                record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
            : 
                '',
        onFilterDropdownVisibleChange: (visible:any) => {
            if (visible) { }
        },
        render : (text:any) => 
            searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : ( text )
        ,
    });
    const handleSearch = (selectedKeys:any, confirm:any, dataIndex:any) => { 
        confirm();
        setSeacrhText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
    } 
    const handleReset = (clearFilters:any) => {
        clearFilters();
        setSeacrhText("");
    }; 
    return {
        buscarColumnaProps,
    } 
}
 

 

