import React , { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { truncateCommitId } from '../common/util';
import {getEmoji} from './emoji';
const typeIco = {
  "submodule":"icon-file-submodule font-17",
  "file":'icon-wenjian6 font-15 color-blue-file',
  "dir":"icon-wenjianjia4 font-15 color-blue_4C"
}

function CoderDepotCatalogue({item , goToSubRoot , owner , projectsId , platform }){
  // 只显示第一个换行符前的内容
  function getMessage(value){
    var matchStr = value.match(/:([a-zA-Z_]+):/g);
    if(matchStr && matchStr.length>0){
      for(var i=0;i < matchStr.length;i++){
        value = value.replace(matchStr[i],getEmoji(matchStr[i]));
      }
    }
    return value;
  }


  return(
    <li>
      <span>
        {
          (!platform && item.image_type) ? 
          <span><i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name}</span>
          :
          (item.type === "submodule" ? 
            (
              item.submodule_git_url ? 
              <React.Fragment>
                <a href={`${item.submodule_git_url.slice(0,item.submodule_git_url.length-4)}`} onClick={()=>{window.scrollTo(0,0)}} target="_self">
                  <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name} 
                </a>
                <span className="ml2">@</span>
                <a href={`${item.submodule_git_url.slice(0,item.submodule_git_url.length-4)}/commits/${truncateCommitId(item.sha)}`} onClick={()=>{window.scrollTo(0,0)}} title={item.sha}>{truncateCommitId(item.sha)}</a>
              </React.Fragment>
              :
              <React.Fragment>
                 <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name} 
                 <span className="ml2">@</span>
                 <span title={item.sha}>{truncateCommitId(item.sha)}</span>
              </React.Fragment>
            )
            :
            <a onClick={()=>goToSubRoot(item.path,item.type,item.name)}>
              <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name}
            </a>
          )
        }
      </span>
      <span title="init project">
        <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit && item.commit.sha}`)}`} title={item.commit && item.commit.message}>
          {getEmoji(getMessage(item.commit && item.commit.message))}
        </Link>
      </span>
      <span title={item.commit && item.commit.created_at}>{item.commit && item.commit.time_from_now}</span>
    </li>
  )
}
export default CoderDepotCatalogue;