content: /**
   *
   * ChatPage
   *
   */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { createStructuredSelector } from 'reselect';
  import { compose } from 'redux';
  
  import injectSaga from 'utils/injectSaga';
  import injectReducer from 'utils/injectReducer';
  import makeSelectChatPage from './selectors';
  import reducer from './reducer';
  import saga from './saga';
  
  export class ChatPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
    render() {
      return (
        <div className="container-fluid">
          <div className="row page-titles">
            <div className="col-md-5 align-self-center">
              <h3 className="text-themecolor">Chats</h3>
            </div>
            <div className="col-md-7 align-self-center">
              <ol className="breadcrumb">
                <li className="breadcrumb-item"><a>Home</a></li>
                <li className="breadcrumb-item">Apps</li>
                <li className="breadcrumb-item active">Chats</li>
              </ol>
            </div>
            <div className="">
              <button className="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10">
                <i className="ti-settings text-white"></i>
              </button>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="card m-b-0">
                <div className="chat-main-box">
                  <div className="chat-left-aside">
                    <div className="open-panel"><i className="ti-angle-right"></i></div>
                    <div className="chat-left-inner">
                      <div className="form-material">
                        <input className="form-control p-20" type="text" placeholder="Search Contact" />
                      </div>
                      <ul className="chatonline style-none ">
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/1.jpg" alt="user-img" className="img-circle" />
                            <span>Varun Dhavan <small className="text-success">online</small></span>
                          </a>
                        </li>
                        <li>
                          <a className="active">
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/2.jpg" alt="user-img" className="img-circle" />
                            <span>Genelia Deshmukh <small className="text-warning">Away</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/3.jpg" alt="user-img" className="img-circle" />
                            <span>Ritesh Deshmukh <small className="text-danger">Busy</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/4.jpg" alt="user-img" className="img-circle" />
                            <span>Arijit Sinh <small className="text-muted">Offline</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/5.jpg" alt="user-img" className="img-circle" />
                            <span>Govinda Star <small className="text-success">online</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/6.jpg" alt="user-img" className="img-circle" />
                            <span>John Abraham<small className="text-success">online</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/7.jpg" alt="user-img" className="img-circle" />
                            <span>Hritik Roshan<small className="text-success">online</small></span>
                          </a>
                        </li>
                        <li>
                          <a>
                            <img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/8.jpg" alt="user-img" className="img-circle" />
                            <span>Pwandeep rajan <small className="text-success">online</small></span>
                          </a>
                        </li>
                        <li className="p-20"></li>
                      </ul>
                    </div>
                  </div>
                  <div className="chat-right-aside">
                    <div className="chat-main-header">
                      <div className="p-20 b-b">
                        <h3 className="box-title">Chat Message</h3>
                      </div>
                    </div>
                    <div className="chat-rbox">
                      <ul className="chat-list p-20">
                        <li>
                          <div className="chat-img"><img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/1.jpg" alt="user" /></div>
                          <div className="chat-content">
                            <h5>James Anderson</h5>
                            <div className="box bg-light-info">Lorem Ipsum is simply dummy text of the printing & type setting industry.</div>
                          </div>
                          <div className="chat-time">10:56 am</div>
                        </li>
                        <li>
                          <div className="chat-img"><img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/2.jpg" alt="user" /></div>
                          <div className="chat-content">
                            <h5>Bianca Doe</h5>
                            <div className="box bg-light-info">It’s Great opportunity to work.</div>
                          </div>
                          <div className="chat-time">10:57 am</div>
                        </li>
                        <li className="reverse">
                          <div className="chat-content">
                            <h5>Steave Doe</h5>
                            <div className="box bg-light-inverse">It’s Great opportunity to work.</div>
                          </div>
                          <div className="chat-img"><img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/5.jpg" alt="user" /></div>
                          <div className="chat-time">10:57 am</div>
                        </li>
                        <li className="reverse">
                          <div className="chat-content">
                            <h5>Steave Doe</h5>
                            <div className="box bg-light-inverse">It’s Great opportunity to work.</div>
                          </div>
                          <div className="chat-img"><img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/5.jpg" alt="user" /></div>
                          <div className="chat-time">10:57 am</div>
                        </li>
                        <li>
                          <div className="chat-img"><img src="https://wrappixel.com/demos/admin-templates/admin-pro/assets/images/users/3.jpg" alt="user" /></div>
                          <div className="chat-content">
                            <h5>Angelina Rhodes</h5>
                            <div className="box bg-light-info">Well we have good budget for the project</div>
                          </div>
                          <div className="chat-time">11:00 am</div>
                        </li>
                      </ul>
                    </div>
                    <div className="card-body b-t">
                      <div className="row">
                        <div className="col-8">
                          <textarea placeholder="Type your message here" className="form-control b-0"></textarea>
                        </div>
                        <div className="col-4 text-right">
                          <button type="button" className="btn btn-info btn-circle btn-lg"><i className="fa fa-paper-plane-o"></i> </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  ChatPage.propTypes = {
    dispatch: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = createStructuredSelector({
    chatpage: makeSelectChatPage(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      dispatch,
    };
  }
  
  const withConnect = connect(mapStateToProps, mapDispatchToProps);
  
  const withReducer = injectReducer({ key: 'chatPage', reducer });
  const withSaga = injectSaga({ key: 'chatPage', saga });
  
  export default compose(
    withReducer,
    withSaga,
    withConnect,
  )(ChatPage);
  