import * as React from 'react'
import { map, orderBy } from 'lodash'
import Slider from 'react-slick'
import * as cx from 'classnames'

import InlineSVG from 'svg-inline-react'
import { IUnreadConversationPanelsComponentProps } from './interfaces'
import './styles.styl'
import ConversationPanel from './ConversationPanel'

const prev = require('!svg-inline-loader?removeSVGTagAttrs=false&removeTags=false!../../../img/svg/slick-prev.svg')
const next = require('!svg-inline-loader?removeSVGTagAttrs=false&removeTags=false!../../../img/svg/slick-next.svg')

const SampleNextArrow = (props: any) => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style }}
      onClick={onClick}
    ><InlineSVG className="active" src={next} /></div>
  )
}

const SamplePrevArrow = (props: any) => {
  const { className, style, onClick } = props
  return (
    <div
      className={className}
      style={{ ...style }}
      onClick={onClick}
    ><InlineSVG className="active" src={prev} /></div>
  )
}

const settings = {
  dots: false,
  infinite: false,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
}


class UnreadConversationPanels extends React.Component<IUnreadConversationPanelsComponentProps> {
  slider: any

  componentWillReceiveProps() {
    this.slider && this.slider.innerSlider.onWindowResized()
  }

  render() {
    const { conversations, endUsersLoading, numberOfUnreadMessagesByConversationId } = this.props
    const moreThanThreeMessages = conversations.length > 3
    const sortedConversations = orderBy(conversations,
      [(conversation: any) => numberOfUnreadMessagesByConversationId[conversation.id], 'updatedAt'],
      ['desc', 'desc'])
    return (!endUsersLoading ?
    <div className="unread-conversations">
      <div className="unread-conversations-wrapper-div">
        <div className="unread-conversations-header">
          <h4 className="feed-header">Your open + pending</h4>
          <div className="unread-conversation-with-badge">
            <h3 className="feed-header">Conversations</h3>
            <span className="badge">{sortedConversations.length}</span>
          </div>
        </div>
        <div className="unread-conversation-container">
          {!!sortedConversations.length && <Slider className="unread-conversation-slider" ref={c => this.slider = c} {...settings}>
            {
              map(sortedConversations, conversation =>
                <div className={cx('unread-conversation-slider-panel', { compact: moreThanThreeMessages })} key={conversation.id}>
                  <ConversationPanel
                    conversation={conversation}
                    compact={moreThanThreeMessages} /></div>)
            }
          </Slider> }
        </div>
        <div style={{ height: '30px' }} />
      </div>
    </div>
    : null
    )
  }
}

export default UnreadConversationPanels