import React, { useEffect, useState, Fragment } from 'react'
import axios from 'axios'
import UpgradeModals from '../modals/UpgradeModals'
import ShixunCardList from '../../components/shixun-card-list'
import { TPMIndexHOC } from '../tpm/TPMIndexHOC'
import ListContainer from './list-container'
import { SnackbarHOC } from 'educoder'
import ShixunPathCard from '../paths/ShixunPathCard'
import { Carousel } from 'antd'
import { getUrl } from 'educoder'
import './index.scss'
import NavList from './nav-list'

function Home({ mygetHelmetapi, user }) {

  const [resource, setResource] = useState({
    loading: true,
    data: {},
    updata: null
  })

  
  let shixuntype = false
  let pathstype = false
  if (mygetHelmetapi) {
    let shixun = "/shixuns";
    let paths = "/paths";
    mygetHelmetapi.navbar.map(item => {
      var reg = RegExp(item.link)
      if (shixun.match(reg)) {
        if (item.hidden === true) {
          shixuntype = true
        }
      }
      if (paths.match(reg)) {
        if (item.hidden === true) {
          pathstype = true
        }
      }
    })
  }

  const { loading, updata, data } = resource
  const { shixuns, subjects, images_url, reps } = data

  return (
    <Fragment>
      {loading ? null :
        <div className="shixun-home newMain clearfix">
          <div className="educontent nav-list-container">
            <div className="carousel-container">
              <Carousel autoplay={true}>
                {images_url.map(item => <a key={item.path} href={item.path}>
                  <img src={getUrl(item.image_url)} alt='banner' />
                </a>)}
              </Carousel>
            </div>
            {user && user.main_site ? <NavList list={reps} /> : null}
          </div>
          {updata ? <UpgradeModals updata={updata} /> : null}
          {pathstype || subjects.length > 0 ?
            <ListContainer to="/paths" title='实践课程' titleEn='TRAINING COURSE' >
              <ShixunPathCard pathList={subjects} />
            </ListContainer  >
            : null}
          {
            (shixuntype || shixuns.length > 0) ?
              <ListContainer to="/shixuns" title='实训项目' titleEn='DEVELOPMENT COMMUNITY' >
                <ShixunCardList list={shixuns} />
              </ListContainer  >
              : null
          }
        </div>
      }
    </Fragment>
  )
}

export default SnackbarHOC()(TPMIndexHOC(Home))
