import {Component, createRef, useState, useEffect, Fragment} from 'react'
import {
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown, CustomInput
} from 'reactstrap'
import {MoreVertical} from "react-feather"
import { useDispatch, useSelector } from 'react-redux'
import {useParams} from "react-router-dom"
import PerfectScrollbar from "react-perfect-scrollbar"
import classnames from "classnames"
import TaskSidebar from "./TaskSidebar"

const Tasks = (props) => {
    const [sort, setSort] = useState('')
    const [query, setQuery] = useState('')
    const [openTaskSidebar, setOpenTaskSidebar] = useState(false)

    // ** Store Vars
    const store = useSelector(state => state.task)

    // ** URL Params
    const paramsURL = useParams()
    const params = {
        filter: paramsURL.filter || '',
        q: query || '',
        sortBy: sort || '',
        tag: paramsURL.tag || '',
        status: paramsURL.status || ''
    }

    const userTask = [
      {
      id: 11,
      title: "Refactor Code and fix the bugs and test it on server ",
      dueDate: "2020-12-01",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Timothy Brewer",
      avatar: "/static/media/1.6a7d13c0.png"
      },
      tags: ["low"],
      isCompleted: true,
      isDeleted: false,
      isImportant: true
      },
      {
      id: 10,
      title: "List out all the SEO resources and send it to new SEO team. ",
      dueDate: "2020-12-09",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Karen Carrillo",
      avatar: ""
      },
      tags: ["low"],
      isCompleted: true,
      isDeleted: false,
      isImportant: false,
      isChecked:true
      },
      {
      id: 8,
      title: "Pick up Nats from her school and drop at dance class😁 ",
      dueDate: "2020-12-08",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Thomas Moses",
      avatar: "/static/media/7.0fc55608.png"
      },
      tags: [
      "low",
      "medium"
      ],
      isCompleted: false,
      isDeleted: false,
      isImportant: false
      },
      {
      id: 7,
      title: "Plan new dashboard design with design team for Google app store. ",
      dueDate: "2020-12-05",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Karina Miller",
      avatar: "/static/media/1.6a7d13c0.png"
      },
      tags: ["medium"],
      isCompleted: false,
      isDeleted: false,
      isImportant: true,
      isChecked:true
      },
      {
      id: 5,
      title: "Test functionality of apps developed by dev team for enhancements. ",
      dueDate: "2020-12-06",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Katherine Perkins",
      avatar: "/static/media/9.8617df44.png"
      },
      tags: ["medium"],
      isCompleted: true,
      isDeleted: false,
      isImportant: true
      },
      {
      id: 4,
      title: "Answer the support tickets and close completed tickets. ",
      dueDate: "2020-11-20",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Curtis Schmidt",
      avatar: "/static/media/9.8617df44.png"
      },
      tags: ["medium"],
      isCompleted: false,
      isDeleted: false,
      isImportant: true
      },
      {
      id: 3,
      title: "Meet Jane and ask for coffee ❤️",
      dueDate: "2020-11-25",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Benjamin Jacobs",
      avatar: ""
      },
      tags: ["high"],
      isCompleted: false,
      isDeleted: false,
      isImportant: false
      },
      {
      id: 2,
      title: "Citizen stand administration step agency century.",
      dueDate: "2020-12-14",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Andrew Anderson",
      avatar: ""
      },
      tags: [
      "team",
      "medium"
      ],
      isCompleted: true,
      isDeleted: false,
      isImportant: false
      },
      {
      id: 1,
      title: "Entire change break our wife wide it daughter mention member.",
      dueDate: "2020-11-25",
      description: "Chocolate cake topping bonbon jujubes donut sweet wafer. Marzipan gingerbread powder brownie bear claw. Chocolate bonbon sesame snaps jelly caramels oat cake.",
      assignee: {
      fullName: "Jacob Ramirez",
      avatar: "/static/media/12.761057bd.png"
      },
      tags: ["update"],
      isCompleted: false,
      isDeleted: false,
      isImportant: false
      }
      ]
    // ** Get Tasks on mount & based on dependency change
    useEffect(() => {
      console.log("hello")
    }, [])

    const renderTasks = () => {
        return (
            <PerfectScrollbar
                className='list-group todo-task-list-wrapper'
                options={{ wheelPropagation: false }}
                containerRef={ref => {
                    if (ref) {
                        ref._getBoundingClientRect = ref.getBoundingClientRect

                        ref.getBoundingClientRect = () => {
                            const original = ref._getBoundingClientRect()

                            return { ...original, height: Math.floor(original.height) }
                        }
                    }
                }}
            >
                <ul>
                {userTask.length ? (
                       userTask.map(item => {
                            return (
                                <li
                                    key={item.id}
                                    className={classnames('todo-item', {
                                        completed: item.isCompleted
                                    })}
                                >
                                    <div className='todo-title-wrapper'>
                                        <div className='todo-title-area'>
                                            {/*<MoreVertical className='drag-icon' />*/}
                                            <CustomInput
                                                type='checkbox'
                                                className='custom-control-Primary'
                                                id={item.id}
                                                label=''
                                                defaultChecked={item.isCompleted}
                                            />
                                            <span className='todo-title' onClick={() => handleTaskClick(item)}>{item.title}</span>
                                        </div>
                                        <div className='todo-item-action mt-lg-0 mt-50'>
                                            {/*{item.tags.length ? <div className='badge-wrapper mr-1'>{renderTags(item.tags)}</div> : null}*/}
                                            {item.dueDate ? (
                                                <small className='text-nowrap text-muted mr-1'>
                                                    {new Date(item.dueDate).toLocaleString('default', { month: 'short' })}{' '}
                                                    {new Date(item.dueDate).getDate().toString().padStart(2, '0')}
                                                </small>
                                            ) : null}
                                            {/*{item.assignee ? renderAvatar(item) : null}*/}
                                        </div>
                                    </div>
                                </li>
                            )
                        })
                ) : (
                    <li className='no-results show'>
                        <h5>No Items Found</h5>
                    </li>
                )}
                </ul>
            </PerfectScrollbar>
        )
    }

    return (
        <Fragment>
                <CardBody className='tasklist-dashboard'>
                    {renderTasks()}
                </CardBody>
        </Fragment>
    )
}

export default Tasks
