import React, { PureComponent } from 'react';
import { Link } from "react-router-dom"

import { getImageUrl } from 'educoder';

import ExchangeRightSearch from './ExchangeRightSearch'
import './exchange.css'
class ExchangeRight extends PureComponent {

  render(){

    const { searchEvent , hottest_memos , recommend_memos , hideSearchPanel} = this.props;

    // 热门话题
    const hotList = hottest_memos && hottest_memos.length > 0 && (
      <div className="bc-white mb20">
        <p className="clearfix r_part_title">
          <img src={getImageUrl("images/plate/hot.png")} width="13px" className="mr10 fl mt7" alt=""/>
          <span className="color-grey3 font-16 fl">热门话题</span>
        </p>
        <ul className="r_part_list">
        {
          hottest_memos.map((apply)=>{
            return(
              <li><a target="_blank" href={`/forums/${apply.id}`}>{apply.subject}</a></li>
            )
          })
        }
        </ul>
      </div>
    )

    // 版主推荐
    const moderatorList = recommend_memos && recommend_memos.length > 0 && (
      <div className="bc-white">
        <p className="clearfix r_part_title">
          <img src={getImageUrl("images/plate/point.png")} width="16px" className="mr10 fl mt7" alt=""/>
          <span className="color-grey3 font-16 fl">版主推荐</span>
        </p>
        <ul className="r_part_list">
          {
            recommend_memos.map((apply)=>{
              return(
                <li><a target="_blank" href={`/forums/${apply.id}`}>{apply.subject}</a></li>
              )
            })
          }
        </ul>
      </div>
    )
    
    return(
      <div className="fl with24">
        {
          !hideSearchPanel && <ExchangeRightSearch {...this.props} {...this.state} searchEvent={searchEvent}></ExchangeRightSearch>
        }
        

        {/* 热门话题 */}
        {hotList}

        {/* 版主推荐 */}
        { moderatorList }
      </div>
    )
  }
}
export default ExchangeRight;