import React from 'react';
import LinkManager from 'modularity-front';
import Modularity from 'modularity-front';
import {Col, Row, Footer , Collection ,  CollectionItem } from 'react-materialize';
import Dictionary from '../Services/DictionaryService';
import TableModule from  '../Modules/Table';
import './ViewOrder.css'
import Moment from 'react-moment';

const Module = Modularity.Module;


class ViewOrder extends Modularity.Module {
	constructor(props) {
        super(props);
		this.state = {
            productHeaders:{
                ProductID:"id",
                image:"image",
                Name:"name",
                Quantity:"quantity",
                Price:{
                    field: "price",
                    suffix: " €"
                },
                
            },
        } 
        console.log(this.Order.value)
    }

    render(){
       
       
        const orderInfo = this.Order.value.Addresses;
        const UserInfo  = <Collection header={
                                    <div className="order_title">
                                        <div className="info_item order_dict">{Dictionary.get("Order")}</div>
                                        <div className="info_item order_status green darken-1">Status: {this.Order.value.status}</div>
                                    </div>

                                }>
                                <CollectionItem  className="title">
                                        <span className="sp_title">Address</span>
                                        <div  className="second">{orderInfo.address || ""}</div>
                                </CollectionItem>
                                <CollectionItem  className="title">
                                        <span className="sp_title">City</span>
                                        <div  className="second">{orderInfo.city || ""}</div>
                                </CollectionItem>
                                <CollectionItem  className="title">
                                        <span className="sp_title">State</span>
                                        <div  className="second">{orderInfo.state || ""}</div>
                                </CollectionItem>
                                <CollectionItem  className="title">
                                    <span className="sp_title">Postal Code</span>
                                    <div  className="second">{orderInfo.postalcode || ""}</div>
                                </CollectionItem>
                                <CollectionItem  className="title">
                                    <span className="sp_title">Phone</span>
                                    <div  className="second">{orderInfo.phone || ""}</div>
                                </CollectionItem>
                                <CollectionItem  className="title">
                                    <span className="sp_title">Created</span>
                                    <div  className="second">
                                        <Moment format="HH:mm DD/MM/YYYY">{this.Order.value.createdAt || ""}</Moment>
                                    </div>
                                </CollectionItem>
                           </Collection>


        
        
        return(
            <Row className="card">
                <Col s={12} className="card-content">
                    <Row>
                        <Col className="" s={4}>
                            {UserInfo}
                        </Col>
                        <Col s={8}>
                            <TableModule TableData={JSON.parse(this.Order.value.products)} TableHeaders = {this.state.productHeaders} />
                        </Col>
                        
                    </Row>
                    <Row className="OrderProducts">
                        
                    </Row>
                    {super.render()}
                </Col>
            </Row>
          
        )
    }

}

ViewOrder.Inputs = {
   
    Order:{
        type:Module.Types.Object,
        defaultValue:{}
    }
   
    
}



ViewOrder.EditPosition = "bottom-right";
ViewOrder.Category = "sxoinas";


export default ViewOrder;