import { useContext, useState } from 'react'
import { kFormatter } from '@utils'
import Avatar from '@components/avatar'
import Timeline from './timeline'
import AvatarGroup from '@components/avatar-group'
import jsonImg from '@src/assets/images/icons/json.png'
import InvoiceList from '@src/views/apps/invoice/list'
import ceo from '@src/assets/images/portrait/small/avatar-s-9.jpg'
import { ThemeColors } from '@src/utility/context/ThemeColors'
import Sales from '@src/views/ui-elements/cards/analytics/Sales'
import AvgSessions from '@src/views/ui-elements/cards/analytics/AvgSessions'
import CardAppDesign from '@src/views/ui-elements/cards/advance/CardAppDesign'
import Contacts from './Contacts'
import Tasks from './Tasks'
import Notes from './Notes'
import TaskSidebar from './TaskSidebar'
import ContactSidebar from './ContactSidebar'
import ActivitySidebar from '../activityTree/ActivitySidebar'
import ActivityTree from '../activityTree/ActivityTree'
import SupportTracker from '@src/views/ui-elements/cards/analytics/SupportTracker'
import {
  Row,
  Col,
  Media,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  InputGroup,
  CustomInput,
  DropdownMenu,
  DropdownItem,
  InputGroupText,
  DropdownToggle,
  InputGroupAddon,
  UncontrolledDropdown
} from 'reactstrap'
import { List, Menu, Search, MoreVertical } from 'react-feather'
import OrdersReceived from '@src/views/ui-elements/cards/statistics/OrdersReceived'
import CardCongratulations from '@src/views/ui-elements/cards/advance/CardCongratulations'
import SubscribersGained from '@src/views/ui-elements/cards/statistics/SubscribersGained'
import { useDispatch, useSelector } from 'react-redux'

import '@styles/react/libs/charts/apex-charts.scss'

function AccountView() {
  const { colors } = useContext(ThemeColors),
    trackBgColor = '#e9ecef'
  const storeActivities = useSelector(state => state.activity)
  const activities = [
    {
      folder: '2021',
      title: "Activity 1"
    },
    {
      folder: '2020'
    },
    {
      folder: '2019'
    }
  ]
  const handleClick = () => {
    console.log("clicked")
  }
  const [openTaskSidebar, setOpenTaskSidebar] = useState(false)
  const [openActivitySidebar, setOpenActivitySidebar] = useState(false)
  const [openContactSidebar, setOpenContactSidebar] = useState(false)

  const handleTaskSidebar = () => setOpenTaskSidebar(!openTaskSidebar)
  const handleActivitySidebar = () => setOpenActivitySidebar(!openActivitySidebar)
  const handleContactSidebar = () => setOpenContactSidebar(!openContactSidebar)
  const avatarGroupArr = [
    {
      title: 'Billy Hopkins',
      img: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default,
      placement: 'bottom',
      imgHeight: 33,
      imgWidth: 33
    },
    {
      title: 'Amy Carson',
      img: require('@src/assets/images/portrait/small/avatar-s-6.jpg').default,
      placement: 'bottom',
      imgHeight: 33,
      imgWidth: 33
    },
    {
      title: 'Brandon Miles',
      img: require('@src/assets/images/portrait/small/avatar-s-8.jpg').default,
      placement: 'bottom',
      imgHeight: 33,
      imgWidth: 33
    },
    {
      title: 'Daisy Weber',
      img: require('@src/assets/images/portrait/small/avatar-s-7.jpg').default,
      placement: 'bottom',
      imgHeight: 33,
      imgWidth: 33
    },
    {
      title: 'Jenny Looper',
      img: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default,
      placement: 'bottom',
      imgHeight: 33,
      imgWidth: 33
    }
  ],
    data = [
      {
        title: '12 Invoices have been paid',
        content: 'Invoices have been paid to the company.',
        meta: '',
        metaClassName: 'mr-1',
        customContent: (
          <Media>
            <img className='mr-1' src={jsonImg} alt='data.json' height='23' />
            <Media className='mb-0' body>
              data.json
            </Media>
          </Media>
        )
      },
      {
        title: 'Client Meeting',
        content: 'Project meeting with john @10:15am.',
        meta: '',
        metaClassName: 'mr-1',
        color: 'warning',
        customContent: (
          <Media className='align-items-center'>
            <Avatar img={ceo} />
            <Media className='ml-50' body>
              <h6 className='mb-0'>John Doe (Client)</h6>
              <span>CEO of Infibeam</span>
            </Media>
          </Media>
        )
      },
      {
        title: 'Create a new project for client',
        content: 'Add files to new design folder',
        color: 'info',
        meta: '',
        metaClassName: 'mr-1',
        customContent: <AvatarGroup data={avatarGroupArr} />
      },
      {
        title: 'Create a new project for client',
        content: 'Add files to new design folder',
        color: 'danger',
        meta: '',
        metaClassName: 'mr-1'
      }
    ]

  return (
    <div id='dashboard-analytics'>
      <Row className='match-height'>
        <Col lg='4' md='6' xs='12'>
          <ActivityTree
            activities={activities}
            handleActivityClick={handleActivitySidebar}
          />
        </Col>
        <Col lg='4' md='6' xs='12'>
          <Card className='card-employee-task'>
            <CardHeader>
              <CardTitle tag='h4'>Contacts</CardTitle>
              <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={handleContactSidebar}>Create New Contact</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </CardHeader>
            <Contacts colors={colors} trackBgColor={trackBgColor} />
          </Card>
        </Col>
        <Col lg='4' md='6' xs='12'>
          <Notes colors={colors} trackBgColor={trackBgColor} />
        </Col>
        <Col lg='8' md='6' xs='12'>
          <Card className='card-user-timeline'>
            <CardHeader>
              <div className='d-flex align-items-center'>
                <List className='user-timeline-title-icon' />
                <CardTitle tag='h4'>User Timeline</CardTitle>
              </div>
            </CardHeader>
            <CardBody>
              <Timeline className='ml-50 mb-0' data={data} />
            </CardBody>
          </Card>
        </Col>
        <Col lg='4' md='6' xs='12'>
          <Card>
            <CardHeader>
              <div className='d-flex align-items-center'>
                <CardTitle>Tasks</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={handleTaskSidebar}
                  >
                    Create new Task
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </CardHeader>
            <Tasks primary={colors.primary.main} info={colors.info.main} />
          </Card>
        </Col>
      </Row>
      <TaskSidebar open={openTaskSidebar} handleTaskSidebar={handleTaskSidebar} />
      <ActivitySidebar open={openActivitySidebar} handleactivitysidebar={handleActivitySidebar} />
      <ContactSidebar open={openContactSidebar} handleContactSidebar={handleContactSidebar} />
    </div>
  )
}
export default AccountView
