import { Component, createRef } from 'react'
import {
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown
} from 'reactstrap'
import TreeTest from "./TreeTest"
import {MoreVertical} from "react-feather"

export default class ActivityTree extends Component {
    constructor(props) {
        super(props)

        // absolutely a better way to do this, but gotta go fast
        this.child = createRef()
        this.state = { openTaskSidebar: false, openContactSidebar:false  }
    }

    // expand and collapse all does not work as the state needs to be moved into this
    // class for it to work properly. ran out of time to do this.
    collapseAll()  {
        console.log('collapse all pressed')
        this.child.current.collapseAll()
    }

    expandAll() {
        console.log('expand all pressed')
        this.child.current.expandAll()
    }

    createNewActivity() {
        console.log('create activity clicked')
        this.props.handleTaskSidebar()
    }

    viewActivity(activity) {
        console.log('parent activity view', activity)
        this.props.handleTaskClick(activity)
    }

    handleContactSidebar = () => {
        setState({ openTaskSidebar : false })
        setState({ openContactSidebar : !openContactSidebar })
    }

    // definitely a better way to do this, but gotta go fast.
    // nest all activities from the store into a folder structure.
    // better way would be to use js.map and js.reduce liberally, or js.filter
    reStructureActivities(activities) {
        const folders = []
        let reordered = []
        // create data structure of just folders
        activities.forEach(activity => {
            // console.log(activity.title)
            if (!folders.includes(activity.folder)) {
                folders.push(activity.folder)
                reordered.push({
                    folderName: activity.folder,
                    activities: []
                })
            }
        })
        // sort to show most recent year at top
        reordered = reordered.sort(function(a, b) {
            if (a.folderName < b.folderName) { return 1 }
            if (a.folderName > b.folderName) { return -1 }
            return 0
        })
        // put all the activities into folder structure
        activities.map((activity) => {
            reordered.forEach((folder, i) => {
                // console.log(activity.title, folder.folderName === activity.folder)
                if (folder.folderName === activity.folder) {
                    reordered[i].activities.push(activity)
                }
            })
        })
        return reordered
    }

    render() {
        const { activities } = this.props
        const activitiesReordered = this.reStructureActivities(activities)
        return (
            <Card>
                <CardHeader>
                    <div className='d-flex align-items-center'>
                        <CardTitle>Activities</CardTitle>
                    </div>
                    <UncontrolledDropdown className='chart-dropdown'>
                        <DropdownToggle color='' className='bg-transparent btn-sm border-0 p-50'>
                            <MoreVertical size={18} className='cursor-pointer' />
                        </DropdownToggle>
                        <DropdownMenu right>
                            <DropdownItem
                                className='w-100'
                                onClick={() => this.props.handleActivityClick()}
                            >
                                Create new Activity
                            </DropdownItem>
                            {/*<DropdownItem*/}
                            {/*    className='w-100'*/}
                            {/*    onClick={() => this.expandAll()}*/}
                            {/*>*/}
                            {/*    Expand all folders*/}
                            {/*</DropdownItem>*/}
                            {/*<DropdownItem*/}
                            {/*    className='w-100'*/}
                            {/*    onClick={() => this.collapseAll()}*/}
                            {/*>*/}
                            {/*    Collapse all folders*/}
                            {/*</DropdownItem>*/}
                        </DropdownMenu>
                    </UncontrolledDropdown>
                </CardHeader>
                <CardBody>
                    <TreeTest
                        dataSource={activitiesReordered}
                        ref={this.child}
                        handleViewActivity={(a) => this.viewActivity(a)}
                    />
                </CardBody>
            </Card>
        )
    }
}
