import React, { useState } from 'react'
import PropTypes from 'prop-types'

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { ButtonGroup, Button } from 'react-bootstrap'
import DropdownButton from 'react-bootstrap/DropdownButton'
import Dropdown from 'react-bootstrap/Dropdown'
import { Link } from 'react-router-dom'
import WithSpinner from '../../../utility/hoc/spinner/with-spinner.component'
import {PopoverController, PopoverDirection}  from './popover-in-dropdown'
import './drop-down-in-row.styles.scss'


/**
 * @param {expandedRow} : indicates whether full screen layout or adaptive to small screens
 * @param {workingAtRow} indicates the row number which is currently undergoing action. e.g. updating / deleting at this row
 * @returns 
 */
const DropDownInRowComponent = ({menuData, dataIndex, rowIsLoading, expandedRow = false, workingAtRow = -1}) => {
    const { firstMenuItem, secondMenuItem, dropDownItems } = menuData
    const [dropdownHidden, setDropdownHidden] = useState(true)
    const direction = dataIndex > 2 ? "start" : "end"
    const ButtonGroupWithSpinner =  WithSpinner(
        () => (
            <ButtonGroup size="sm">
            {
                    !!firstMenuItem.showInPopover ? 
                        <PopoverController buttonIcon={firstMenuItem.iconName} 
                            postion={expandedRow ? PopoverDirection.RIGHT : PopoverDirection.LEFT}
                            title={firstMenuItem.popoverTitle}
                            buttonAdditionalClasses={firstMenuItem.additionalClass(dataIndex)}>
                                {firstMenuItem.popoverContent(dataIndex, firstMenuItem.handler)}
                        </PopoverController>
                    :
                    <div>
                    
                        <Button variant="outline"  className={firstMenuItem.additionalClass(dataIndex)}
                                            onClick={(e) => firstMenuItem.handler(dataIndex, e)}>
                            <FontAwesomeIcon
                                icon={firstMenuItem.iconName} 
                                />
                        </Button>
                    </div>
                }
                
                
                {!!secondMenuItem ? 
                    <div>
                        <Button variant="outline" className={secondMenuItem.additionalClass(dataIndex)}                            
                            onClick={(e) =>secondMenuItem.handler(dataIndex, e)}
                            >
                            <FontAwesomeIcon
                                icon={secondMenuItem.iconName} 
                                />
                        </Button>
                    </div>                    
                    : null
                }
                
                {
                    dropDownItems.length > 0 ? (
                    <div> 

                    <DropdownButton
                            as={ButtonGroup}
                            variant="outline"
                            className="btn-action dot-btn" 
                            title={<i className="fa fa-ellipsis-v"></i>}
                        >
                            {dropDownItems.map(({iconName, menuId, menuTitle, menuTarget, handler=(i,j)=>{}}) => (
                                <Link key={menuId} className="dropdown-item" to={menuTarget(dataIndex)}
                                    onClick={(e) =>handler(dataIndex, e)}
                                >
                                    <FontAwesomeIcon icon={iconName}/>
                                    <span className="ml-3">{menuTitle}</span>
                                </Link>
                                )
                            )}                            
                        </DropdownButton>
                               
                        {/* <Button variant="outline" className="btn-action dot-btn" 
                                data-toggle="dropdown" onClick={() => setDropdownHidden(!dropdownHidden)}>
                            <i className="fa fa-ellipsis-v"></i>
                        </Button>
                        <div className={`dropdown-menu dropdown-menu-right ${dropdownHidden ? '': 'show'}`}>     
                            {dropDownItems.map(({iconName, menuId, menuTitle, menuTarget, handler=(i,j)=>{}}) => (
                                    <Link key={menuId} className="dropdown-item" to={menuTarget(dataIndex)}
                                        onClick={(e) =>handler(dataIndex, e)}
                                    >
                                        <FontAwesomeIcon icon={iconName} />
                                        <span className="ml-3">{menuTitle}</span>
                                    </Link>
                                    )
                                )}           
                        </div>       */}
                         
                    </div>
                    ) : null
            }        
                  
            </ButtonGroup>
        )
    )

    return (        
        <ButtonGroupWithSpinner defaultHeight={false} defaultSize={27.5} isLoading={rowIsLoading && dataIndex === workingAtRow }/>    
    )
}


DropDownInRowComponent.propTypes = {
    dataIndex: PropTypes.number.isRequired,
    menuData: PropTypes.object.isRequired    
}

export default DropDownInRowComponent