import React, { Component, useState } from 'react';
import Header from './Header';
import Footer from './Footer';
import './Index.scss';
import axios from 'axios';

export function HomeHoc(Sub){
  return class II extends Component {
    constructor(props){
      super(props);
      this.state={
        users:undefined
      }
    }

    componentDidMount=()=>{
      this.getUser();
    }

    getUser=()=>{
      const url = `/users/get_user_info.json`;
      axios.get(url).then(result=>{
        if(result){
          this.setState({
            users:result.data.data
          })
        }
      }).catch(error=>{})
    }

    successFunc=(data)=> {
      if(data){
        this.setState({
          users:data
        })
      }else{
        this.getUser();
      }
    }

    quitFunc =()=>{
      const url = `/accounts/logout.json`;
      axios.get(url).then(result=>{
        if(result && result.data){
          this.setState({
            users:undefined
          })
        }
      }).catch(error=>{})
    }

    render(){
      const { users } = this.state; 
      const { headData } = this.props;
      console.log(this.props);
      return(
        <div style={{height:"100%",overflow:"auto",position:"relative"}}>
          <Header {...this.props} {...this.state} users={users} headData={headData} successFunc={this.successFunc} quitFunc={this.quitFunc}/>
          <div className="homebody">
            <Sub {...this.props} {...this.state} users={users}/>
            <Footer />
          </div>
        </div>
      )
    }
  }
}
export default HomeHoc;