<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link href="/node_modules/semantic-ui-css/semantic.min.css" rel="stylesheet" />
	<link href="/static/css/main.css" rel="stylesheet" />
	<title>microStock Dummy Cart</title>
</head>
<body ng-app="microStockDummieCare" ng-controller="MainCtrl">
	<nav class="ui stackable inverted menu">
		<div class="ui container">
			<div class="header item">Dummy Cart</div>
			<div class="right menu">
				<a class="ui item" ng-click="reset()">
					<i class="undo icon"></i>
					Reset
				</a>
			</div>
		</div>
	</nav>

  <div class="ui container">
		<form class="ui form" ng-submit="add()">
			<div class="three fields">
				<div class="field">
					<div class="ui fluid search selection dropdown">
						<input name="country" type="hidden">
						<i class="dropdown icon"></i>
						<div class="default text">Select Product</div>
						<div class="menu">
							<div class="item" ng-repeat="item in products" data-value="{{item.id}}"><img class="icon" ng-src="{{'/api/good/availablity/'+item.id| reloadSrc}}"/>{{item.title}}</div>
						</div>
					</div>
				</div>
				<div class="field">
					<input placeholder="Count" type="number" min="1" max="50"  ng-model="goods.count">
				</div>
				<div class="field">
				 	<button type="submit" class="ui button" tabindex="0">Add</button>
				</div>
			</div>
		</form>
		<table class="ui table">
			<thead>
				<tr>
					<th>Count</th>
					<th>Product</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in cart">
					<td>{{item.count}}</td>
					<td>{{getProduct(item.product_id).title}}</td>
					<td>
						<div class="ui button icon" ng-click="del(item)"><i class="icon trash"></i></div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

  <footer class="ui vertical footer segment">
    <div class="ui center aligned container">
      <p>&copy; 2017 MM / Go - Team</p>
    </div>
  </footer>
	<script src="/node_modules/jquery/dist/jquery.min.js"></script>
	<script src="/node_modules/semantic-ui-css/semantic.min.js"></script>
  <script src="/node_modules/angular/angular.min.js"></script>
  <script src="/node_modules/angular-animate/angular-animate.min.js"></script>
  <script src="/node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="/node_modules/angular-loading-bar/build/loading-bar.min.js"></script>
	<script>
	var config = {
		'microservice_dependencies': {
			'products': '/api-test/product/',
			'productById': '/api-test/product/%d/',
			'lockGoods': '/api/goods/locking',
			'unlockGoods': '/api/goods/locking'
	  }
	};

	let selectedProduct = null;
	$(".dropdown").dropdown().dropdown('setting', {
		onChange: function (value) {
			selectedProduct = parseInt(value, 10);
			console.log('changed product', selectedProduct);
		}
	});

	function createUUID () {
		let digit = new Date().getTime();

		// Use high-precision timer if available
		/* eslint-disable */
		if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
			digit += performance.now();
		}

		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => {
			const result = (digit + Math.random() * 16) % 16 | 0;

			digit = Math.floor(digit / 16);

			return (char === 'x'
			? result
			: result & 0x3 | 0x8).toString(16);
		});
		/* eslint-enable*/
	}


	angular.module('microStockDummieCare', [
	    'angular-loading-bar',
	    'ngAnimate'
	  ])
		.filter('reloadSrc', function () {
	    return function (input) {
	      if (input)
	          return input + '?v=' + new Date().getTime();
	      }
	  })
		.controller('MainCtrl',['$scope', '$http',function($scope, $http) {
			$scope.products = [];
			$scope.goods = {count:1};
			$scope.cart = [];

			$http.get(config.microservice_dependencies.products).then(function(res) {
				$scope.products = res.data;
			});

			function load() {
				const tmp = JSON.parse(localStorage.getItem("cart"));
				if(tmp) {
					$scope.cart = tmp.map((item) => {
						delete item.$$hashKey
						return item;
					});
				}
			}
			function save(){
				localStorage.setItem("cart",JSON.stringify($scope.cart));
			}
			load();

			$scope.getProduct = function getProduct(id){
				if(id) {
					return $scope.products.filter((item) => item.id === id)[0];
				}
			};

			$scope.add = function add() {
				$scope.goods.product_id = selectedProduct;
				const secret = createUUID();
				$http({
					method: 'POST',
					headers: {
						'secret': secret
					},
					url: config.microservice_dependencies.lockGoods,
					data: [$scope.goods]
				}).then(function(res) {
					console.log('add', $scope.goods);
					$scope.goods.secret = secret;
					$scope.cart.push($scope.goods);
					save();
					$scope.goods = {count:1};
				});
			};

			$scope.del = function del(entry) {
				$http({
					method: 'DELETE',
					headers: {
						'secret': entry.secret
					},
					url: config.microservice_dependencies.unlockGoods
				}).then(function(res) {
					console.log('del', entry);
					$scope.cart = $scope.cart.filter((item) => item !== entry);
					save();
				});
			};

			$scope.reset = function reset() {
				console.log("reset");
				localStorage.setItem("cart","[]");
				load();
			};

		}]);
	</script>
</body>
</html>
