import React, { Fragment } from 'react'
import { getImageUrl, setImagesUrl } from 'educoder';
import { Link } from 'react-router-dom'
import { Tooltip, Rate } from 'antd';
import './index.scss'

export default ({ list = [] }) => {
  return (
    <Fragment>
      {list.map((item, key) => {
        const { id, tag_name, is_jupyter, power, identifier, pic, name, score_info, stu_num, level, challenges_count } = item
        return (
          <div className="square-Item" key={id} id={id}>
            {
              tag_name === null ? null :
                <div className="tag-green">
                  <span className="tag-name"> {tag_name}</span>
                </div>
            }
            {
              is_jupyter === true ?
                <div className="tag-org">
                  <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
                </div>
                : null
            }
            {power ? null
              : <div className="closeSquare">
                <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
                  className="mt80 mb25" />
                <p className="font-14 color-white">非试用内容，需要授权</p>
              </div>
            }
            <Link to={"/shixuns/" + identifier + "/challenges"} className="square-img" target="_blank">
              <img src={setImagesUrl(`${pic}`)} />
            </Link>

            <div className="square-main">
              <p className="task-hide">
                <Link to={"/shixuns/" + identifier + "/challenges"} className="justify color-grey-name" title={name} target="_blank">
                  {name}
                </Link>
              </p>

              <p className="clearfix mt8 ml-3">
                <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
                  <Rate key={key} allowHalf defaultValue={score_info === null ? 5 : score_info} disabled />
                </span>
                <span className="fl ml25 font-12 color-grey-9 lineh-12 mt5">{score_info === null ? "5分" : score_info + "分"}</span>
              </p>

              <p className="clearfix mt8 font-12 color-grey-B4">
                {is_jupyter === false ? <Tooltip placement="bottom" title={"关卡"}>
                  <span className="mr10 fl squareIconSpan">
                    <i className="iconfont icon-shixunguanqia fl mr3"></i>{challenges_count}
                  </span>
                </Tooltip> : ""}

                {stu_num === 0 ? null :
                  <Tooltip placement="bottom" title={"学习人数"}>
                    <span className="mr10 fl squareIconSpan">
                      <i className="iconfont icon-chengyuan fl mr3"></i>{stu_num}
                    </span>
                  </Tooltip>
                }
                <span className="fr color-grey-B3 squareIconSpan">{level}</span>
              </p>

            </div>
          </div>
        )
      })}
    </Fragment>
  )
}