import React, { memo } from 'react';
import { Button } from 'antd';
import Line from '../Line';
import logoLine from '../img/4-logo.png';
import task from '../img/4-task.png';
import codeManage from '../img/4-codeManage.png';
import versionManage from '../img/4-versionManage.png';
import editorInline from '../img/4-editorInline.png';
import teamwork from '../img/4-teamwork.png';
import './index.scss';

const code = [
  { str: <span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span> },
  { str: <span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb7</span> },
  { str: <span>Status:Image is up to date for appleboy/drone-ssh:latest</span> },
  { str: <span><span className='code-green'>echo ====开始部署=======</span></span> },
  // { str: <span><span className='code-green'>echo ====暂停容器开始======= </span></span> },
  { str: <span><span className='code-red'>docker</span> rm -f mo-test</span> },
  { str: <span><span className='code-red'>docker</span> rmi mo-test:1.0</span> },
  // { str: <span><span className='code-blue'>cd</span> /opt/demo</span> },
  { str: <span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span> },
  { str: <span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span> },
  { str: <span><span className='code-green'>echo ====部署成功=======</span></span> },
  { str: <span className="code-input"><span className='code-blue'>~/opt/Users/demo/app/static/</span><span className="animation-is-typing"></span></span> },
  // { str: <span><span className='code-green'>======END======</span></span> },
]

function FourthSection({ fourth, history }) {
  return (
    <div className="fourth-main homepage-main">
      <div className="fourth-title">
        <div className="fourth-main-title">
          <h2 className="homePage-blue-tit">开源项目</h2>
          <h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
          <Line />
          <Button className="homepage-btn" type="primary" onClick={()=>{history.push('/explore/all')}}>查看项目 <i className="iconfont icon-gengduoicon"></i></Button>
        </div>

        <div className={fourth ? "code-box clearfix activeCode" : "code-box clearfix"} >
          <div className="code-box-action code-box-picture">
            <img src={task}></img>
          </div>
          <div className="code-box-action code-box-code">
            <div className="hadoopCode">
              <ul className="code-content">
                <li key={0}>
                  <pre  >
                    <span className="codenum">1</span>
                    <span className="">
                      <span className='word-item code-blue' style={{ animationDelay: '2.4s' }}> ~/</span>
                      <span className='word-item code-blue' style={{ animationDelay: '2.5s' }}>c</span>
                      <span className='word-item code-blue' style={{ animationDelay: '2.6s' }}>d</span>
                      <span className="code-input js-type-letters animation-is-typing" style={{ animationDelay: '2.6s' }}></span>
                      <span className='word-item code-green' style={{ animationDelay: '3.3s' }}> /opt</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.4s' }}>/Us</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.5s' }}>ers</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.6s' }}>/de</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.7s' }}>mo</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.8s' }}>/app</span>
                      <span className='word-item code-green' style={{ animationDelay: '3.9s' }}>/sta</span>
                      <span className='word-item code-green' style={{ animationDelay: '4.0s' }}>tic</span>
                      <span className="code-input js-type-letters animation-is-typing" style={{ animationDelay: '4.0s' }}></span>
                    </span>
                  </pre>
                </li>
                {
                  code.map((i, k) => {
                    return (
                      <li key={k + 1}><pre className="word-item" style={{ animationDelay: `${k * 0.2 + 4.5}s` }}><span className="codenum">{k + 2}</span>{i.str}</pre></li>
                    )
                  })
                }
              </ul>
            </div>
          </div>
          <img src={logoLine}></img>
        </div>
      </div>

      <div className={fourth ? "fourth-projects activeCode" : "fourth-projects"}>

        <div className="project-item">
          <div className="fourth-item-img">
            <img src={codeManage} />
            <div className="fourth-item-circle"></div>
          </div>
          <h3 className="fourth-item-title">代码托管</h3>
          <p className="fourth-item-des">免费提供海量代码仓储</p>
        </div>

        <div className="project-item">
          <div className="fourth-item-img">
            <img src={versionManage} />
            <div className="fourth-item-circle"></div>
          </div>
          <h3 className="fourth-item-title">版本管理</h3>
          <p className="fourth-item-des">记录和维护软件演化全过程</p>
        </div>

        <div className="project-item">
          <div className="fourth-item-img">
            <img src={editorInline} />
            <div className="fourth-item-circle"></div>
          </div>
          <h3 className="fourth-item-title">在线编辑</h3>
          <p className="fourth-item-des">轻量级修改和提交</p>
        </div>

        <div className="project-item">
          <div className="fourth-item-img">
            <img src={teamwork} />
            <div className="fourth-item-circle"></div>
          </div>
          <h3 className="fourth-item-title">质量追踪</h3>
          <p className="fourth-item-des">代码安全和质量管控</p>
        </div>


      </div>


    </div>
  )
}

export default memo(FourthSection);