import * as React from 'react';
import {isEqual, filter, difference} from 'lodash'
import PropsTypes from './types';
import {arrowUpDown} from '../function'
import Button from '../Button'
import ScrollArea from 'react-scrollbar'
import * as uuidv4 from 'uuid/v4';

interface State extends PropsTypes {
    dataIndex: number | null,
    uuid: string
}

export default class Result extends React.Component<PropsTypes, State> {
    public state: State;
    private scroll = React.createRef<HTMLDivElement>();

    constructor(props: PropsTypes, {}) {
        super(props);

        this.state = {
            dataIndex: null,
            uuid: uuidv4(),
            ...props
        }
    }

    componentDidMount() {
        document.addEventListener("keydown", this.handlePress, false);
    }

    componentWillUnmount() {
        document.removeEventListener("keydown", this.handlePress, false);
    }

    handlePress = (e: any) => {
        let {data} = this.props;
        let {dataIndex} = this.state;


        if (e.key === 'Enter') {
            if (dataIndex !== null) {
                this.dataSelectItem(data[dataIndex]);
            }
            e.preventDefault();
        }

        if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && data.length) {
            this.setState({
                ...this.state,
                dataIndex: arrowUpDown(e.key, dataIndex, data)
            }, () => {
                if (this.scroll) {
                    if (dataIndex && dataIndex > 3) {
                        this.scroll['scrollArea'].scrollYTo(dataIndex * 30);
                    } else {
                        this.scroll['scrollArea'].scrollYTo(0);
                    }
                }
            })
        }
    };

    removeAll() {
        this.props.onRemoveAll && this.props.onRemoveAll()
    }

    removeTag(item: any) {
        this.props.onRemoveItem && this.props.onRemoveItem(item)
    }

    dataSelectItem(item: any) {
        this.props.onSelectItem && this.props.onSelectItem(item)
    }


    render() {
        const {data, multiple, field, selectData, removeAfterSelect} = this.props;
        let mapData:any = data;

        if(removeAfterSelect) mapData = difference(data,selectData);

        if (data && data.length) {
            return <>
                {
                    selectData.length && multiple
                        ? <>
                            <div className="krax-dropdown-item"  style={{padding: 5}}>
                                <Button
                                    type="a"
                                    text="Tümünü sil"
                                    color="text"
                                    size='small'
                                    onClick={() => this.removeAll()}
                                />
                            </div>
                            <hr className="dropdown-divider" style={{margin: 0}}/>
                        </>
                        : null
                }
                {
                    multiple && selectData && selectData.length
                        ? <>
                            <div className="krax-dropdown-item" style={{padding: 15}}>
                                {
                                    selectData.map((item: any, i: number) => {
                                        return <span className="krax-tag is-default" key={i} style={{marginRight:3}}>
                                                  {item[field]}
                                            <button type="button" className="krax-delete is-small" onClick={() => this.removeTag(item)} />
                                                </span>
                                    })
                                }
                            </div>
                            <hr className="dropdown-divider" style={{margin: 0}}/>
                        </>
                        : null
                }

                <ScrollArea smoothScrolling={true} speed={0.8} className="scroll-area-container" contentClassName="" horizontal={false} ref={(ref: any) => this.scroll = ref}>
                    {

                        mapData.map((item: any, i: number) => {
                            let activeClass: any = '';
                            if (multiple && selectData && selectData.length) {
                                filter(selectData, (k: any) => {
                                    if (isEqual(k, item)) activeClass = 'active';
                                    return false
                                })
                            }

                            let activeHoverClass: string = this.state.dataIndex === i ? 'activeHover' : '';

                            return <a key={i} className={`krax-dropdown-item ${multiple ? 'with-icon' : ''} ${activeClass} ${activeHoverClass}`} onClick={() => {this.dataSelectItem(item)}}>
                                {multiple && <span className="krax-icon"><i className="fal fa-check" /></span> }
                                <span>{item[field]}</span>
                            </a>
                        })
                    }
                </ScrollArea>
            </>
        }

        return null
    }
}