// order-food.component

import {template} from './../../../../helpers/helpers';
import {imgPath} from "../../../../environment";
import Loc from "../../../../helpers/localization";

export default function OrderFoodComponent() {
    return {
        templateUrl: template('profile', 'components/order-food'),
        bindings: {
            order: '<',
            index: '=?',
            abandon: '&?',
            confirm: '&?',
            problem: '&?'
        },
        controller: OrderFoodController
    }
}

class OrderFoodController {
    private imgRoot: string;
    private lc: any;
    private order: any;
    private index: any;
    constructor(private storage) {
        'ngInject';

        this.imgRoot = imgPath;
        this.lc = Loc.get('profile');
    }

    localize (localization) {
        let index = localization.findIndex(locale => locale.language === this.storage.get('lang'));
        return localization[index].value;
    }

    $onChanges (bindings) {
        if (bindings.order.currentValue) {
            this.order.info.map(item => {
                return item.food.name = this.localize(item.food.name);
            });
        }
    }

    setOrderStatus(status, type) {
        this[status]({
            id: this.order.id,
            status: status,
            index: this.index,
            type: type
        });
    }

}


// template


<div class="order-food-holder">
    <div class="object-restaurant">
        <img width="87" height="50"
             ng-src="{{::$ctrl.imgRoot}}{{::$ctrl.order.restaurant.image}}"
             alt="{{::$ctrl.order.restaurant.name}}">
        <a ui-sref="restaurant({slug: $ctrl.order.restaurant.slug})" class="name">{{::$ctrl.order.restaurant.name}}</a>
        <button ng-if="$ctrl.abandon" ng-click="$ctrl.setOrderStatus('abandon', 'news')"
                class="problem visible-lg">{{::$ctrl.lc.b_cancel}}
        </button>
        <button ng-if="$ctrl.confirm" ng-click="$ctrl.setOrderStatus('confirm', 'confirmeds')"
                class="problem visible-lg">{{::$ctrl.lc.b_confirm}}
        </button>
        <button ng-if="$ctrl.problem" ng-click="$ctrl.setOrderStatus('problem', 'problems')"
                class="problem visible-lg">{{::$ctrl.lc.b_problem}}
        </button>
        <div class="data-order hidden-lg">{{::$ctrl.order.created_at | split:' ':0}}
            {{::$ctrl.lc.t_in}}
            {{::$ctrl.order.created_at | split:' ':1}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-5 col-sm-12">
            <div class="order-information">
                <h5>{{::$ctrl.lc.t_food_orders}}</h5>
                <p><span>{{::$ctrl.lc.t_order_tel}}</span> <phone></phone></p>
                <p><span>{{::$ctrl.lc.t_order_adress}}</span> {{::$ctrl.order.address}}</p>
                <p><span>{{::$ctrl.lc.t_order_info}}</span> {{::$ctrl.order.message}}</p>

                <p ng-if="$ctrl.order.delivery === 'self'">
                    <span>{{::$ctrl.lc.t_delivery_type}}</span>
                    {{::$ctrl.lc.t_self}}
                </p>
                <p ng-if="$ctrl.order.delivery === 'courier'">
                    <span>{{::$ctrl.lc.t_delivery_type}}</span>
                    {{::$ctrl.lc.t_courier}}
                </p>

                <div ng-if="$ctrl.order.delivery === 'courier'">
                    <p ng-if="$ctrl.order.time === null">
                        <span>{{::$ctrl.lc.t_delivery_time}}</span>
                        {{::$ctrl.lc.t_soon_possible}}
                    </p>
                    <p ng-if="$ctrl.order.time !== null">
                        <span>{{::$ctrl.lc.t_delivery_time}}</span>
                        {{::$ctrl.order.time.from}} - {{::$ctrl.order.time.to}}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-7 col-sm-12">
            <div class="menu-content">
                <h5>{{::$ctrl.lc.t_order_content}}</h5>
                <p ng-repeat="item in $ctrl.order.info track by $index">
                    {{$index + 1 }}. <span>{{::item.quantity}} {{::$ctrl.lc.t_count}}  {{::item.food.name}} </span>
                    <strong>{{::$ctrl.lc.t_order_price}} <price-component item="item.food"></price-component>
                        {{$ctrl.currency}}</strong>
                </p>
                <div class="total-sum">
                    <p><span>{{::$ctrl.lc.t_order_sum}}</span> {{::$ctrl.order.price}}
                        {{$ctrl.currency}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="buttons-block">
        <button ng-if="$ctrl.confirm" ng-click="$ctrl.setOrderStatus('confirm', 'confirmeds')"
                class="problem hidden-lg">{{::$ctrl.lc.b_confirm}}
        </button>
        <button ng-if="$ctrl.problem" ng-click="$ctrl.setOrderStatus('problem', 'problems')"
                class="problem hidden-lg">{{::$ctrl.lc.b_problem}}
        </button>
        <button ng-if="$ctrl.abandon" ng-click="$ctrl.setOrderStatus( 'abandon', 'news')"
                class="order-recieve hidden-lg">{{::$ctrl.lc.b_cancel}}
        </button>
    </div>
</div>