import React from 'react';
import LinkManager from 'modularity-front';
import Modularity from 'modularity-front';
import {Col,Row} from 'react-materialize';
import './CartPage.css';
import API from '../../Services/API';
import Repository from '../../Services/Repository';
import UserService from '../../Services/UserService';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import CustomTable from '../../Modules/CustomTable';
import ViewOrder from '../../HigherModules/ViewOrder';
import ShopInfo from '../../Inputs/TonersalesInfo';
import './OrderPackage.css';
import CircularProgress from '@material-ui/core/CircularProgress';


let Module = Modularity.Module;

class OrderPackage extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.api = new API('/orders', this.Token.value);
		this.addressRepo = new Repository('addresses', this.Token.value);
		this.accountRepo = new Repository('accounts', this.Token.value);
		this.OrdersRepo = new Repository('orders',this.Token.value);
		this.userRepo = new UserService({
            Token: (t) => {
            }
        });
		

		this.Token.onUpdate((token) => this.handleToken(token));
		console.log("hhh")
		this.handleToken()
	}

	getOrder() {
		let url = this.RoutingSystem.getRoute().url
		let id = url.split('/order/')[1]
		this.OrdersRepo.setToken(this.Token.value);
		this.OrdersRepo.get(id)
		.then((data) => {
			this.setState({order:data})

			this.forceUpdate();
	
		})
	}

	routeMatch() {
		return this.RoutingSystem.getRoute().url.startsWith(this.baseURL.value);
	}
	
	handleToken() {
		if(this.Token.value === "missing" 
			&& this.RoutingSystem.getRoute().url !== "/login" 
			&& this.routeMatch()) {
			this.CoreSystem.go('/login', { ref: this.RoutingSystem.getRoute().url }, true)
		}
		if(!this.Token.value) {
			return;
			// this.requestClientToken(this.Token.value);
		}

		this.api.setToken(this.Token.value);
		this.accountRepo.setToken(this.Token.value);
		this.addressRepo.setToken(this.Token.value);
		this.getOrder();

		
	}



	

	
	render() {
		
	
		if(!this.state.order)
			return (
				<div className="loadin_container">
				<Row className="card">
	                <Col s={12} className="card-content">

	                	<div className="loader">
	                		<CircularProgress  />
	                	</div>
	                </Col>
				
				{super.render()}
				</Row>
				</div>
				)
		return (

			<div className="order_container">
	        	
	        	<ViewOrder  Order= {this.state.order}/>

	        	{super.render()}
	        	
		    </div>
			);	    
	}
}



OrderPackage.EditPosition = "center";
OrderPackage.Inputs = {
	Order: {
		type: Module.Types.Object
	},
	Token: {
		type: Module.Types.Text
	},
	baseURL: {
		type: Module.Types.Text,
		defaultValue: "/orders/:id"
	}
}



OrderPackage.Outputs = {
	
}

OrderPackage.Category = "Sxoinas Packages";
export default OrderPackage;