import * as React from 'react';
// import {isString} from 'lodash';
import * as uuidv4 from 'uuid/v4'
// import RenderHtml from '../renderFunction';
import PropsTypes from './types';
import Icon from '../Icon'
import Button from '../Button'

// import classNames from "classnames";

interface State {
    uuid: string,
    active: boolean,
    activeElement: string | null,
    text: string | null
}

export default class Index extends React.Component<PropsTypes, State> {

    private button = React.createRef<HTMLDivElement>();

    constructor(props: PropsTypes, public state: State ) {
        super(props);

        this.state = {
            uuid: uuidv4(),
            active: false,
            activeElement: null,
            text:null
        }
    }

    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside, false);
    }

    componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside, false);
    }

    handleClickOutside = (event:any) => {
        const inp = this.button.current && this.button.current['contains'] && this.button.current['contains'](event.target);

        if (inp) {
            this.setState({
                activeElement: this.state.uuid
            })
        }

        if (!inp) {
            this.setState({
                active: !this.state.active,
                activeElement: null
            })
        }
    };

    handleClick = () => {
        const {disabled} = this.props;

        if (disabled) {
            return
        }

        this.props.onClick && this.props.onClick()

    };

    buttonClick() {
        this.setState({
            active: !this.state.active
        })
    }

    ddClick(item:any) {

        const {displayField, prefix} = this.props;

        let x:string = displayField ? item[displayField] : item;
        x = prefix ? prefix + x : x;

        this.setState({
            activeElement: null,
            active: false,
            text: x
        }, () => {
            this.props.onClick && this.props.onClick(item)
        })
    }

    ddMenu() {
        const {data, displayField} = this.props;
        if (data && data.length) {
            return data.map((item:any, i:number) => {
                return <a
                    href="#"
                    className="krax-dropdown-item"
                    key={i}
                    onClick={() => this.ddClick(item)}
                >
                    {displayField ? item[displayField] : item}
                </a>
            })
        }
    }

    renderTypeRender() {
        const {uuid, active, activeElement, text} = this.state;
        const {data, fluid} = this.props;

        let textObj:any = {}

        if (text) {
            textObj = {
                text: text
            }
        }

        return <div className={`krax-dropdown ${activeElement === uuid && active ? 'is-active' : ''} ${fluid ? 'is-block' : ''}`} ref={this.button}>
            <div className="krax-dropdown-trigger">
                <Button
                    type="button"
                    {...this.props}
                    {...textObj}
                    onClick={() => this.buttonClick()}
                >
                    <span>Click me</span>
                    <span className="krax-icon is-small">
                        <Icon icon="fas fa-angle-down"/>
                    </span>
                </Button>
            </div>
            {data && data.length ? <div className="krax-dropdown-menu" id={uuid} role="menu">
                <div className="krax-dropdown-content">
                    {this.ddMenu()}
                </div>
            </div> : null }
        </div>
    }

    public render(): JSX.Element {
        return this.renderTypeRender();
    }
}