/** Car List component. Renders `car` components */
let carListComponent = {
    bindings: {
        profile: '<'
    },
    controller: function () {},
    template: `
        <div class="profile-block">
            <div class="header">Cars</div>
            <div class="car-block" ng-repeat="car in $ctrl.profile.Cars">
                <car car="car"></car>
            </div>
            <div>
                <a ui-sref="addCar">
                    <i class="fa fa-plus-circle ico-add" aria-hidden="true"></i> <span class="add">Add Car</span>
                </a>
            </div>
        </div>
    `
};

export default carListComponent;

/** Car component */
let carComponent = {
    bindings: {
        car: '<'
    },
    controller: function ($state, CarsService) {
        this._$state = $state;
        this.CarsService = CarsService;

        this.getCarPic = (carId) => {
            return this.CarsService
                .getCarPicture(carId)
                .then((res) => {
                    let img = btoa(String.fromCharCode.apply(null, new Uint8Array(res)));
                    document.querySelector(`#car_${carId}`).src = `data:image/jpeg;base64,${img}`;
                }, err => console.log(err));
        }

        this.deleteCar = (carId) => {
            let val = confirm('Are you sure you want to delete the car?');
            if (val) {
                return this.CarsService
                    .deleteCar(carId)
                    .then(res => this._$state.reload(), err => console.log(err));
            }
        }
    },
    template: `
         <img src="" ng-init="$ctrl.getCarPic($ctrl.car.CarId)" ng-attr-id="{{'car_' + $ctrl.car.CarId}}" class="img-responsive">
         <div class="block-part">
            <div class="name"><p>{{$ctrl.car.CarMakeEntity.Make}} {{$ctrl.car.CarModelEntity.Model}}</p></div>
            <div class="property"><p>Number of seats: {{$ctrl.car.Seats}}</p></div>
            <div class="property">
                Color: <div class="car-color" ng-style="{'background': $ctrl.car.Color}"></div>
            </div>
            <div uib-dropdown dropdown-append-to-body>
                <i class="fa fa-ellipsis-v" aria-hidden="true" uib-dropdown-toggle="" id={{$ctrl.car.CarId}}></i>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby={{$ctrl.car.CarId}}>
                    <li role="menuitem">
                        <a href="#">Edit</a>
                    </li>
                    <li role="menuitem">
                        <a href="#" ng-click="$ctrl.deleteCar($ctrl.car.CarId)">Delete</a>
                     </li>
                </ul>
            </div>
         </div>
    `
};

export default carComponent;