import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Route } from "react-router-dom";
import { logout } from '../actions/isLogin';
import Footer from '../components/layouts/Footer';
import Header from '../components/layouts/Header';
//Layout
import { HOST_CLOUD } from '../config';
import Store from '../store';

import ImportImage from '../components/ImportImg/ImportImage';
import LabelImage from '../components/LabelImg/LabelImage';
import SearchImage from '../components/SearchImg/SearchImage';
import Role from '../components/Role/Role';
import User from '../components/User/User';
import Test from '../components/Test/Test';
import MenuBar from '../components/layouts/MenuBar'
import ListItem from '../components/List/ListItem';

class ReactRouter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataRole: Store.getState().role.role,
        }
        Store.subscribe(() => {
            this.setState({
                dataRole: Store.getState().role.role,
            }, () => {
            });
        });
    }


    render() {
        return (
            <div className="m-grid m-grid--hor m-grid--root m-page">
                <Header />
                <MenuBar />
                    {
                        this.state.dataRole?.indexOf('search:view') !== -1 
                            ?
                            <>
                                   <Route exact path='/' component={SearchImage} />
                            </>
                            :
                            ''
                    }
                   
                    {
                        this.state.dataRole?.indexOf('search:view') !== -1 
                            ?
                            <>
                                    <Route path='/search-image' component={SearchImage} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('import:view') !== -1
                            ?
                            <>
                                    <Route path='/import-image' component={ImportImage} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('person:view') !== -1
                            ?
                            <>
                                    <Route path='/label-image' component={LabelImage} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('level:view') !== -1
                            ?
                            <>
                                    <Route path='/role' component={Role} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('user:view') !== -1
                            ?
                            <>
                                    <Route path='/user' component={User} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('level:view') !== -1
                            ?
                            <>
                                    <Route path='/test' component={Test} />
                            </>
                            :
                            ''
                    }
                    {
                        this.state.dataRole?.indexOf('famous:view') !== -1
                            ?
                            <>
                                    <Route path='/list-famous' component={ListItem} />
                            </>
                            :
                            ''
                    }
                {/* <Footer /> */}
            </div>
        );
    }
}
export default withRouter(ReactRouter);