import vehheader from './components/header/index.js';
import vehshopleft from './components/vehshopleft/index.js';
import vehshopright from './components/vehshopright/index.js';
import vehicleslist from './components/vehicleslist/index.js';
import bill from './components/bill/index.js';
import bossmenu from './components/bossmenu/index.js';
import adminmenu from './components/adminmenu/index.js';

const vuexstore = Vuex.createStore({
	state: {
		selectedCategory: false,
		viewMode: false,
		showBill: false,
		page: '',
		jobData: false,
		vehicleshopData: false,
		ranks: [],
		bossmenuPage: 1,
		stockMarketCategories: [],
		stockMarketVehicles: [],
		selectedVehicleShop: {},
		selectedVehicle: false,
		currency: '',
		notification: {
			type: false,
			text: false,
		},
		notificationTimeout: false,
		pdmFee: 1000,
		customPlateFee: 20,
		adminMenuVehicleshops: [],
		billPage: 1,
		vehicleshops: [],
		enableCustomPlate: false,
		locales: {},
		playerName: '',
	},
	mutations: {
		setCurrency(state, payload) {
			state.currency = payload;
		},
		setPlayerName(state, payload) {
			state.playerName = payload;
		},
		setLocales(state, payload) {
			state.locales = payload;
		},
		setBillPage(state, payload) {
			state.billPage = payload;
			if (!payload) {
				state.selectedVehicle = false;
			}
		},
		setCustomPlateFee(state, payload) {
			state.customPlateFee = payload;
		},
		setAdminMenuVehicleshops(state, payload) {
			state.adminMenuVehicleshops = payload;
		},
		setPdmFee(state, payload) {
			state.pdmFee = payload;
		},
		createNotification(state, payload) {
			if (!payload.text || !payload.type) {
				return;
			}
			if (payload.type != 'error' && payload.type != 'success') {
				payload.type = 'success';
			}
			if (state.notification.text) {
				clearTimeout(state.notificationTimeout);
			}

			state.notification = payload;
			state.notificationTimeout = setTimeout(() => {
				state.notification.type = false;
				state.notification.text = false;
			}, 3000);
		},
		setViewMode(state, payload) {
			if(payload && !state.selectedVehicle){
				return
			}
			state.viewMode = payload;
			if (!payload) {
				postNUI('setVehicleHeader');
			}
		},
		setSelectedVehicle(state, payload) {
			if (payload && payload.model == state.selectedVehicle.model) {
				state.selectedVehicle = false;
			} else {
				state.selectedVehicle = payload;
			}
		},
		setSelectedVehicleShop(state, payload) {
			state.selectedVehicleShop = payload;
		},
		setStockMarketCategories(state, payload) {
			state.stockMarketCategories = payload;
		},
		setStockMarketVehicles(state, payload) {
			state.stockMarketVehicles = payload;
		},
		setBossMenuPage(state, payload) {
			state.bossmenuPage = payload;
		},
		setShowBill(state, payload) {
			state.showBill = payload;
		},
		setRanks(state, payload) {
			state.ranks = payload;
		},
		setPage(state, payload) {
			state.page = payload;
		},
		setJobData(state, payload) {
			state.jobData = payload;
		},
		setVehicleShopData(state, payload) {
			state.vehicleshopData = payload;
		},
		setSelectedCategory(state, payload) {
			state.selectedCategory = payload;
			if (!payload) {
				state.selectedVehicle = false;
			}
		},
		setEnableCustomPlate(state, payload) {
			state.enableCustomPlate = payload;
		},
	},
});

const app = Vue.createApp({
	data: () => ({
		testMode: false,
		remainTestTime: 0,
		showOfferRequest: false,
		offerData: {
			id: false,
			position: false,
			salary: false,
		},
		jobOfferModal: false,
	}),
	components: {
		vehheader,
		vehshopleft,
		vehshopright,
		vehicleslist,
		bill,
		bossmenu,
		adminmenu,
	},
	methods: {
		...Vuex.mapMutations({
			setCurrency: 'setCurrency',
			setPage: 'setPage',
			setJobData: 'setJobData',
			setVehicleShopData: 'setVehicleShopData',
			setRanks: 'setRanks',
			setStockMarketVehicles: 'setStockMarketVehicles',
			setStockMarketCategories: 'setStockMarketCategories',
			setSelectedVehicleShop: 'setSelectedVehicleShop',
			setSelectedVehicle: 'setSelectedVehicle',
			setViewMode: 'setViewMode',
			createNotification: 'createNotification',
			setShowBill: 'setShowBill',
			setPdmFee: 'setPdmFee',
			setCustomPlateFee: 'setCustomPlateFee',
			setAdminMenuVehicleshops: 'setAdminMenuVehicleshops',
			setEnableCustomPlate: 'setEnableCustomPlate',
			setSelectedCategory: 'setSelectedCategory',
			setLocales: 'setLocales',
			setPlayerName: 'setPlayerName',
		}),
		testVehicle() {
			if (!this.selectedVehicle) {
				this.createNotification({
					type: 'error',
					text: 'Select a vehicle first!',
				});
				return;
			}
			postNUI('testVehicle', this.selectedVehicle);
			this.testMode = true;
		},
		checkPermission(name) {
			return this.jobData.permissions[name] || this.isBoss;
		},
		numberWithSpaces(x) {
			if (!isNaN(x)) {
				return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			}
			return 'NaN';
		},
		acceptOffer() {
			postNUI('acceptOffer', this.offerData.id);
			this.offerData = {
				id: false,
				position: false,
				salary: false,
			};
			this.jobOfferModal = false;
			postNUI('unfocus');
		},
		messageHandler(event) {
			switch (event.data.action) {
				case 'checkNui':
					postNUI('loaded');
					break;
				case 'openBossMenu':
					this.openBossMenu();
					break;
				case 'openAdminMenu':
					this.openAdminMenu();
					break;
				case 'setPlayerName':
					this.setPlayerName(event.data.payload);
					break;
				case 'SetSelectedVehicleShop':
					this.setSelectedVehicleShop(event.data.payload);
					break;
				case 'setJobData':
					this.setJobData(event.data.payload);
					break;
				case 'setCurrency':
					this.setCurrency(event.data.payload);
					break;
				case 'showJobOfferModal':
					this.jobOfferModal = true;
					break;
				case 'openVehicleShop':
					this.openVehicleshop();
					break;
				case 'showOfferRequest':
					this.showOfferRequest = true;
					this.offerData = event.data.payload;
					break;
				case 'closeOfferRequest':
					this.showOfferRequest = false;
					break;
				case 'createNotification':
					this.createNotification(event.data.payload);
					break;
				case 'setVehicleShopData':
					this.setVehicleShopData(event.data.payload);
					break;
				case 'setRanks':
					this.setRanks(event.data.payload);
					break;
				case 'setStockMarketCategories':
					this.setStockMarketCategories(event.data.payload);
					break;
				case 'setLocales':
					this.setLocales(event.data.payload);
					break;
				case 'setAdminMenuVehicleShops':
					this.setAdminMenuVehicleshops(event.data.payload);
					break;
				case 'setStockMarketVehicles':
					this.setStockMarketVehicles(event.data.payload);
					break;
				case 'setEnableCustomPlate':
					this.setEnableCustomPlate(event.data.payload);
					break;
				case 'setRemainTestTime':
					this.remainTestTime = event.data.payload;
					break;
				case 'closeTestMode':
					this.testMode = false;
					break;
				case 'close':
					this.close();
					break;
				case 'cancelTestMode':
					this.testMode = false;
					postNUI('cancelTestMode');
					break;
				case 'setPDMFee':
					this.setPdmFee(event.data.payload);
					break;
				case 'setCustomPlateFee':
					this.setCustomPlateFee(event.data.payload);
					break;
				default:
					break;
			}
		},
		openBossMenu() {
			this.setPage('bossmenu');
		},
		openAdminMenu() {
			this.setPage('adminmenu');
		},
		openVehicleshop() {
			this.setSelectedCategory(false);
			this.setShowBill(false);
			this.setViewMode(false);
			this.setPage('vehicleshop');
		},
		keyHandler(e) {
			if (e.which == 27 && this.page.length > 0) {
				this.close();
			}
		},
		buyVehicle() {
			if (this.selectedVehicle) {
				this.setShowBill(true);
			}
		},
		close() {
			postNUI('close');
			this.setPage('');
			this.setSelectedVehicleShop({});
			this.setSelectedVehicle(false);
			this.setShowBill(false);
		},
	},
	mounted() {
		window.addEventListener('wheel', (e) => {
			if (this.viewMode && this.selectedVehicle) {
				if (e.deltaY < 0) {
					postNUI('zoomin');
				}
				if (e.deltaY > 0) {
					postNUI('zoomout');
				}
			}
		});

		window.addEventListener('message', this.messageHandler);
		window.addEventListener('keydown', this.keyHandler);
		document.querySelector('#app').style.display = 'block';
		let holding = false;
		document.addEventListener('mousedown', function (e) {
			holding = true;
		});
		document.addEventListener('mouseup', function (e) {
			holding = false;
		});

		let mousemovemethod = (e) => {
			if (this.viewMode && this.selectedVehicle) {
				let direction = '';
				// if (e.movementY > 0 && e.movementX == 0 && holding) {
				//     direction = "down";
				//     postNUI('rotatedown')

				// } else if (e.movementY < 0 && e.movementX == 0 && holding) {
				//     direction = "up";
				//     postNUI('rotateup')

				if (e.movementX > 0 && e.movementY == 0 && holding) {
					direction = 'right';
					postNUI('rotateright');
				} else if (e.movementX < 0 && e.movementY == 0 && holding) {
					direction = 'left';
					postNUI('rotateleft');
				}
			}
		};

		document.addEventListener('mousemove', mousemovemethod);
	},
	watch: {
		selectedVehicle(val) {
			if (val) {
				postNUI('spawnLocalVehicle', val);
			} else {
				postNUI('deleteLocalVehicle');
			}
		},
		selectedVehicleShop(val) {
			if (val && val.vehicles) {
				let find = val.vehicles.find((item) => item.model == this.selectedVehicle.model);
				if (!find) {
					if (this.billPage != 3) {
						this.setSelectedVehicle(false);
						this.setShowBill(false);
					}
				} else {
					this.selectedVehicle.amount = find.amount;
				}
			}
		},
	},
	computed: {
		...Vuex.mapState({
			selectedCategory: (state) => state.selectedCategory,
			viewMode: (state) => state.viewMode,
			showBill: (state) => state.showBill,
			page: (state) => state.page,
			selectedVehicle: (state) => state.selectedVehicle,
			notification: (state) => state.notification,
			selectedVehicleShop: (state) => state.selectedVehicleShop,
			billPage: (state) => state.billPage,
			locales: (state) => state.locales,
			currency: (state) => state.currency,
		}),
		formatRemainTestTime() {
			var sec_num = parseInt(this.remainTestTime, 10); // don't forget the second param
			var hours = Math.floor(sec_num / 3600);

			var minutes = Math.floor((sec_num - hours * 3600) / 60);
			var seconds = sec_num - hours * 3600 - minutes * 60;
			if (minutes < 10) {
				minutes = '0' + minutes;
			}
			if (seconds < 10) {
				seconds = '0' + seconds;
			}
			return minutes + ':' + seconds;
		},
	},
});

app.use(vuexstore);
app.mount('#app');