import Chart from 'react-apexcharts'
import Avatar from '@components/avatar'
import { MoreVertical } from 'react-feather'
import { Card, Badge, CardHeader, CardTitle, CardBody, Media, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'

const Contacts = ({ colors, trackBgColor }) => {
  const employeesTasks = [
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default,
      title: 'Ryan Harrington',
      email: 'email@email.com',
      contact: '0123567890'
    },
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default,
      title: 'Louisa Norton',
      email: 'email@email.com'
    },
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-1.jpg').default,
      title: 'Jayden Duncan',
      email: 'email@email.com',
      contact: '0123567890'
    },
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default,
      title: 'Cynthia Howell',
      email: 'email@email.com'
    },
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-16.jpg').default,
      title: 'Helena Payne',
      email: 'email@email.com'
    },
    {
      avatar: require('@src/assets/images/portrait/small/avatar-s-13.jpg').default,
      title: 'Troy Jensen',
      email: 'email@email.com',
      contact: '0123567890'
    }
  ]

  const renderTasks = () => {
    return employeesTasks.map(task => {
      const quickContactView = [task.email, task.contact].filter(Boolean).join(" | ")
      return (
        <div key={task.title} className='employee-task d-flex justify-content-between align-items-center'>
          <Media>
            <Avatar imgClassName='rounded' className='mr-75' img={task.avatar} imgHeight='42' imgWidth='42' />
            <Media className='my-auto' body>
              <h6 className='mb-0'>{task.title}</h6>
              <small>{quickContactView}</small>
            </Media>
          </Media>
          <div className='d-flex justify-content-between align-items-center'>
            {task.email ? (<Badge color='light-primary' pill>Email</Badge>) : ''}&nbsp;
            {task.contact ? (<Badge color='light-success' pill>SMS</Badge>) : ''}
          </div>
        </div>
      )
    })
  }

  return (
      <CardBody>{renderTasks()}</CardBody>
  )
}

export default Contacts
