import React, { useState, useMemo, useEffect } from "react"
import {Select, Typography} from "antd"
import debounce from 'lodash/debounce';

import { highlightSearchContentByTerms } from '../../../../util';

const {Option} = Select

const SelectUser:React.FC=(props)=>{

    const {value,onChange,users,type,loading=false, terms,publishedValue} = props

    const [searchValue, setSearchValue] = useState(undefined)

    const debounceFetcher = useMemo(() => {
        return debounce((value) => {
            setSearchValue(value);
        }, 800);
      }, []);

    const filterUsers = useMemo(() => {
        if (searchValue) {
            return users?.filter(item => item.nachn?.includes(searchValue) || item.pernr?.includes(searchValue));
        } 
        
        return users||[];
    }, [users, searchValue])  

    const change=(value)=>{
        onChange&&onChange(value)
    }

    if(type==='edit'){
        return(
            <Select 
                style={{width:'100%'}}
                showSearch
                value={value}
                onChange={change}
                onClear={() => {
                    setSearchValue()
                }}
                loading={loading}
                allowClear
                filterOption={false}
                onSearch={debounceFetcher}
            >
                {
                    filterUsers?.map((item)=>{
                        return(
                            <Option value={item.pernr} key={item.pernr}>{`${item.nachn}(${item.pernr})`}</Option>
                        )
                    })
                }
            </Select>
        )
    }else if(type==='detail'){
        return <span>
            <Typography.Text>{highlightSearchContentByTerms(value, terms)}</Typography.Text>
            {
                publishedValue && publishedValue!==value && <Typography.Text className='ml-2' type='danger'><del>{publishedValue}</del></Typography.Text>
            }
        </span>
        // try {
        //     const user = (users??[]).filter((item)=>(item.pernr===value))
        //     let publishedUser = null;
        //     if (publishedValue && publishedValue !== value) {
        //         publishedUser = (users??[]).filter((item)=>(item.pernr===publishedValue))
        //     }

        //     return <span>
        //         <Typography.Text>{highlightSearchContentByTerms(`${user[0].nachn}(${user[0].pernr})`, terms)}</Typography.Text>
        //         {
        //             publishedUser && <Typography.Text className='ml-2' type='danger'><del>{`${publishedUser[0].nachn}(${publishedUser[0].pernr})`}</del></Typography.Text>
        //         }
        //     </span>;
        // } catch (error) {
        //     return <span>
        //        <Typography.Text>{highlightSearchContentByTerms(value, terms)}</Typography.Text>
        //        {
        //            publishedValue && publishedValue!==value && <Typography.Text className='ml-2' type='danger'><del>{publishedValue}</del></Typography.Text>
        //        }
        //     </span>
        // }
    }else{
        return null
    }
}   

export default SelectUser