const { createApp } = Vue;

const app = createApp({
    data() {
        return {
            Show: {
                Camera: false,
                Store: false,
                Craft: false,
                Data: false,
                Plugins: false,
                EnterTimer: false,
                Timer: false,
                CarInformation: false,
                CameraNotification: false,
                Cross: false,
            },
            ActiveFilter: 'NRM',
            CurrencyType: '$',
            dateString: '2024-01-01',
            hoursString: '00:00:00',
            Players: {
                fullName: 'John Doe',
                grade: 'Unemployed',
                job: 'Unemployed',
            },
            ShowData: {
                type: 'vehicle',
                ped: 'a_m_y_skater_01',
                name: 'asea',
                image: 'assets/image/default.png',
                birthDate: '01/01/2000',
                plate: '0RESMON',
            },
            ActiveCategory: {
                id: 'all',
                name: 'All',
            },
            ActiveCar: {
                item: {
                    name: 'select_a_car',
                    label: 'Select a Car',
                    description: 'Lorem Ipsum',
                    price: 0,
                },
                vehicle: {
                    istatistics: {
                        speed: 0,
                        control: 0,
                        brake: 0,
                    },
                }
            },
            ActiveCraft: {
                item: {
                    name: 'select_a_craft',
                    label: 'Select a Craft',
                },
                resources: {
                    screw: 1,
                    silver: 1,
                    silver: 1,
                    iron: 1,
                    copper: 1,
                    emerald: 1,
                },
            },
            ActiveCrafting: null,
            Locales: {},
            SignalLost: false,
            SignalLostType: false,
            Notifications: [],
            Categorys: [],
            Cars: [],
            Crafts: [],
            StreetName: 'Unknown',
            totalTime: 60,
            remainingTime: 60,
            intervalId: null,
            paths: [],
            getResourceCount: [],
            ActivePlugins: {
                Bomb: {
                    status: false,
                    name: 'Bomb',
                },
                ScanIdentifier: {
                    status: false,
                    name: 'Scan Identifier',
                },
                Teaser: {
                    status: false,
                    name: 'Teaser',
                },
            },
            ActivePlugin: null,
            BatteryLevel: 100,
            DamageLevel: 100,
            DistanceLevel: 0,
            CarName: 'Unknown',
            isDragging: false,
            startX: 0,
            scrollLeft: 0,
            seconds: 0,
            timer: null,
        };
    },
    methods: {
        messageHandler(event) {
            switch (event.data.action) {
                case 'OpenWeb':
                    document.getElementById('app').style.display = 'flex';
                    break;
                case 'OpenStore':
                    this.Cars = event.data.payload.cars;
                    this.Categorys = event.data.payload.categorys;
                    this.Crafts = event.data.payload.crafts;
                    this.Show.Store = true;

                    this.ActiveCar = this.Cars[0];
                    document.getElementById('app').style.display = 'flex';
                    break;
                case 'SetCamera':
                    this.Show.Camera = event.data.payload.active;
                    this.CarName = event.data.payload.carName;
                    this.hoursUpdate();
                    setInterval(this.hoursUpdate, 1000);

                    const date = new Date();

                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');

                    this.dateString = `${year}-${month}-${day}`;

                    if (event.data.payload.first) {
                        this.Players = event.data.payload.playerData;
                    }

                    if (this.Show.Camera) {
                        document.getElementById('app').style.display = 'flex';
                    } else {
                        this.ShowData = {
                            type: 'vehicle',
                            ped: 'a_m_y_skater_01',
                            name: 'asea',
                            image: 'assets/image/default.png',
                            birthDate: '01/01/2000',
                            plate: '0RESMON',
                        },

                        this.Show = {
                            Camera: false,
                            Store: false,
                            Craft: false,
                            Data: false,
                            Plugins: false,
                            EnterTimer: false,
                            Timer: false,
                            CarInformation: false,
                            CameraNotification: false,
                        },

                        this.ActivePlugin = null;
                        document.getElementById('app').style.display = 'none';
                    }
                    break;
                case 'ShowData':
                    this.Show.Data = true;
                    this.ShowData = event.data.payload;
                    break;
                case 'HideData':
                    this.Show.Data = false;
                    this.ShowData = {
                        type: 'vehicle',
                        ped: 'a_m_y_skater_01',
                        name: 'asea',
                        image: 'assets/image/default.png',
                        birthDate: '01/01/2000',
                        plate: '0RESMON',
                    };
                    break;
                case 'NoSignal':
                    this.SignalLostType = event.data.payload.type;

                    if (this.SignalLostType === 3) {
                        this.SignalLost = true;
                    }
                    break;
                case 'Notification':
                    this.Notifications.push({
                        id: this.Notifications.length + 1,
                        header: event.data.payload.header,
                        message: event.data.payload.message
                    });
                    this.Show.CameraNotification = true;
                
                    setTimeout(() => {
                        this.Notifications.shift();
                        if (this.Notifications.length === 0) {
                            this.Show.CameraNotification = false;
                        }
                    }, 5000);
                    break;
                case 'CheckNui':
                    postNUI('CheckNui');
                    break;
                case 'Close':
                    this.Close();
                    break;
                case 'ChangeCameraType':
                    this.ActiveFilter = event.data.payload;
                    break;
                case 'UpdateStreet':
                    this.StreetName = event.data.payload;
                    break;
                case 'SetLocale':
                    this.Locales = event.data.payload;
                    break;
                case 'StartPlugins':
                    if (event.data.payload.type == 'ScanIdentifier') {
                        this.ActivePlugins[event.data.payload.type] = {
                            status: event.data.payload.status,
                            name: 'Scan Identifier',
                        };
                    } else {
                        this.ActivePlugins[event.data.payload.type] = {
                            status: event.data.payload.status,
                            name: event.data.payload.type,
                        };
                    }
                    break;
                case 'UpdateBattery':
                    this.BatteryLevel = event.data.payload;
                    break;
                case 'UpdateDistance':
                    this.DistanceLevel = event.data.payload;
                    break;
                case 'UpdateDamage':
                    this.DamageLevel = event.data.payload;
                    break;
                case 'OpenPluginsMenu':
                    this.Show.Plugins = true;
                    break;
                case 'ResetExtensions':
                    this.ActivePlugins = {
                        Bomb: {
                            status: false,
                            name: 'Bomb',
                        },
                        ScanIdentifier: {
                            status: false,
                            name: 'Scan Identifier',
                        },
                        Teaser: {
                            status: false,
                            name: 'Teaser',
                        },
                    };
                    break;
                default:
                    break;
            };
        },
        capitalize(text) {
            if (!text) return '';
            return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
        },
        formatPrice(value) {
            if (!value) return '$0.00';
            return new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: 'USD',
              minimumFractionDigits: 2,
            }).format(value);
        },
        pxToVw(px) {
            const vw = (px / 1920) * 100;
            return `${vw}vw`;
        },
        keyHandler(e) {
            if (!this.Show.Camera && e.which == 27) {
                this.Close();
                return;
            } else if (this.Show.EnterTimer && e.which == 27) {
                this.Show.EnterTimer = false;
                postNUI('CloseMenu');
                return;
            } else if (this.Show.Plugins && e.which == 27) {
                this.Show.Plugins = false;
                postNUI('CloseMenu');
                return;
            }
        },
        Close() {
            document.getElementById('app').style.display = 'none';
            this.seconds = 0;
            this.timer = null;
            if (this.timer) {
                clearInterval(this.timer);
            }
            this.Show = {
                Camera: false,
                Store: false,
                Plugins: false,
                Craft: false,
                Data: false,
                CarInformation: false,
                CameraNotification: false,
                Cross: false,
            }
            this.Show.CameraNotification = false;
            this.Notifications = [];
            postNUI('CloseMenu');
        },
        ConvertValue(value, oldMin, oldMax, newMin, newMax) {
            const oldRange = oldMax - oldMin
            const newRange = newMax - newMin
            const newValue = ((value - oldMin) * newRange) / oldRange + newMin
            return newValue
        },
        ChangeCategory(category) {
            if (category.id === this.ActiveCategory.id) return;
            this.ActiveCategory = category;
        },
        OpenCarInformation() {
            if (this.ActiveCar && !this.Show.CarInformation) {
                this.Show.CarInformation = true;
            } else {
                this.Show.CarInformation = false;
            }
        },
        hoursUpdate() {
            const date = new Date();
        
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
        
            this.hoursString = `${hours}:${minutes}:${seconds}`;
            
        },
        BuyCar() {
            postNUI('BuyCar', this.ActiveCar);
        },
        async NewCraftItem(data) {
            if (data.item.name === this.ActiveCraft.item.name) return;

            this.ActiveCraft = data;

            const response = await postNUI('GetCraftResources', this.ActiveCraft.resources);

            if (response) {
                this.getResourceCount = response;
            }
        },
        getResourceCountValue(resourceName) {
            if (!this.getResourceCount) return 0;
            const resource = this.getResourceCount.find(item => item.name === resourceName);
            return resource ? resource.count : 0;
        },
        initializePaths() {
            this.paths = [
                { d: "M104 11.5645L106.891 11.8247L107.932 0.260205L105.041 0L104 11.5645Z", color: "white", opacity: 0.2 },
                { d: "M116.371 13.2392L113.515 12.7209L115.588 1.29629L118.444 1.81461L116.371 13.2392Z", color: "white", opacity: 0.2 },
                { d: "M122.871 14.7234L125.669 15.4957L128.758 4.30292L125.96 3.53067L122.871 14.7234Z", color: "white", opacity: 0.2 },
                { d: "M134.729 18.5771L132.011 17.5571L136.091 6.68629L138.809 7.70627L134.729 18.5771Z", color: "white", opacity: 0.2 },
                { d: "M140.867 21.2012L143.483 22.4607L148.521 11.9994L145.905 10.7399L140.867 21.2012Z", color: "white", opacity: 0.2 },
                { d: "M151.851 27.1126L149.359 25.6237L155.314 15.6561L157.806 17.1449L151.851 27.1126Z", color: "white", opacity: 0.2 },
                { d: "M157.428 30.7867L159.777 32.4929L166.602 23.0993L164.253 21.3931L157.428 30.7867Z", color: "white", opacity: 0.2 },
                { d: "M167.181 38.5622L164.995 36.6523L172.635 27.9082L174.821 29.8181L167.181 38.5622Z", color: "white", opacity: 0.2 },
                { d: "M171.99 43.1739L173.996 45.2721L182.389 37.248L180.383 35.1499L171.99 43.1739Z", color: "white", opacity: 0.2 },
                { d: "M180.21 52.5659L178.4 50.2964L187.478 43.057L189.288 45.3265L180.21 52.5659Z", color: "white", opacity: 0.2 },
                { d: "M184.121 57.9644L185.721 60.387L195.411 53.9905L193.812 51.5679L184.121 57.9644Z", color: "white", opacity: 0.2 },
                { d: "M190.517 68.6702L189.142 66.114L199.366 60.6119L200.742 63.168L190.517 68.6702Z", color: "white", opacity: 0.2 },
                { d: "M193.413 74.6839L194.554 77.3531L205.231 72.7896L204.09 70.1204L193.413 74.6839Z", color: "white", opacity: 0.2 },
                { d: "M197.797 86.3592L196.9 83.5984L207.943 80.0104L208.84 82.7711L197.797 86.3592Z", color: "white", opacity: 0.2 },
                { d: "M199.577 92.7932L200.223 95.6232L211.543 93.0395L210.897 90.2094L199.577 92.7932Z", color: "white", opacity: 0.2 },
                { d: "M201.799 105.063L201.41 102.186L212.916 100.628L213.306 103.504L201.799 105.063Z", color: "white", opacity: 0.2 },
                { d: "M202.395 111.711L202.525 114.61L214.125 114.09L213.994 111.19L202.395 111.711Z", color: "white", opacity: 0.2 },
                { d: "M202.4 124.178L202.531 121.278L214.13 121.799L214 124.699L202.4 124.178Z", color: "white", opacity: 0.2 },
                { d: "M201.792 130.826L201.403 133.703L212.909 135.261L213.298 132.385L201.792 130.826Z", color: "white", opacity: 0.2 },
                { d: "M199.577 143.097L200.223 140.267L211.543 142.851L210.897 145.681L199.577 143.097Z", color: "white", opacity: 0.2 },
                { d: "M197.798 149.529L196.901 152.29L207.944 155.878L208.841 153.117L197.798 149.529Z", color: "white", opacity: 0.2 },
                { d: "M193.409 161.206L194.549 158.536L205.226 163.1L204.085 165.769L193.409 161.206Z", color: "white", opacity: 0.2 },
                { d: "M190.521 167.216L189.145 169.772L199.37 175.274L200.745 172.718L190.521 167.216Z", color: "white", opacity: 0.2 },
                { d: "M184.122 177.922L185.721 175.5L195.411 181.896L193.812 184.319L184.122 177.922Z", color: "white", opacity: 0.2 },
                { d: "M180.205 183.321L178.396 185.59L187.474 192.83L189.283 190.56L180.205 183.321Z", color: "white", opacity: 0.2 },
                { d: "M171.989 192.714L173.995 190.616L182.388 198.64L180.382 200.738L171.989 192.714Z", color: "white", opacity: 0.2 },
                { d: "M167.179 197.327L164.993 199.237L172.632 207.981L174.818 206.071L167.179 197.327Z", color: "white", opacity: 0.2 },
                { d: "M157.43 205.102L159.778 203.396L166.603 212.789L164.255 214.496L157.43 205.102Z", color: "white", opacity: 0.2 },
                { d: "M151.86 208.775L149.368 210.264L155.323 220.232L157.815 218.743L151.86 208.775Z", color: "white", opacity: 0.2 },
                { d: "M140.863 214.689L143.479 213.43L148.517 223.891L145.901 225.15L140.863 214.689Z", color: "white", opacity: 0.2 },
                { d: "M134.737 217.312L132.019 218.332L136.099 229.203L138.816 228.183L134.737 217.312Z", color: "white", opacity: 0.2 },
                { d: "M122.868 221.164L125.666 220.391L128.755 231.584L125.957 232.356L122.868 221.164Z", color: "white", opacity: 0.2 },
                { d: "M116.37 222.65L113.513 223.168L115.587 234.592L118.443 234.074L116.37 222.65Z", color: "white", opacity: 0.2 },
                { d: "M106.891 224.064L104 224.324L105.041 235.889L107.932 235.629L106.891 224.064Z", color: "white", opacity: 0.2 },
            ];
        },
        async Crafting() {
            if (this.ActiveCraft && this.ActiveCraft.item && this.ActiveCraft.item.name !== 'select_a_craft' && !this.ActiveCrafting) {
                const response = await postNUI('Crafting', this.ActiveCraft);
        
                if (response) {
                    this.ActiveCrafting = { ...this.ActiveCraft };
        
                    this.remainingTime = this.ActiveCrafting.item.time * 60;
                    this.totalTime = this.remainingTime;
        
                    this.startCountdown();
                }
            }
        },
        startCountdown() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
      
            this.intervalId = setInterval(() => {
                if (this.remainingTime > 0) {
                    this.remainingTime--;
                    this.updatePaths();
                } else {
                    postNUI('CraftingFinish', this.ActiveCrafting);
                    this.setAllPathsToFinalColor();
                    this.ActiveCrafting = {};
                    clearInterval(this.intervalId);
                }
            }, 1000);
        },
        updatePaths() {
            const totalPaths = this.paths.length;
            const timePerPath = this.totalTime / totalPaths;

            this.paths = this.paths.map((path, index) => {
                const activationTime = this.totalTime - (index + 1) * timePerPath;

                if (this.remainingTime <= activationTime) {
                    return { ...path, color: "#35BF93", opacity: 1 };
                }
                return { ...path, color: "white", opacity: 0.2 };
            });
        },
        setAllPathsToFinalColor() {
            this.paths = this.paths.map((path) => ({ ...path, color: "#35BF93" }));
        },
        StartPlugin(name) {
            if (this.ActivePlugin !== name) {
                this.Show.Cross = true;
                this.ActivePlugin = name;
                if (name !== 'Bomb') {
                    const plugin = this.ActivePlugin.replace(' ', '');
                    postNUI('ActivePlugin', plugin);
                } else {
                    const plugin = this.ActivePlugin.replace(' ', '');
                    this.Show.EnterTimer = true;
                    this.Show.Plugins = false;
                    postNUI('ActivePlugin', plugin);
                }
            }
        },
        StartTimer() {
            const minutes = parseInt(document.getElementById('time-minutes').value);
            const seconds = parseInt(document.getElementById('time-seconds').value);
        
            if (isNaN(minutes) || isNaN(seconds) || minutes < 0 || seconds < 0 || minutes > 10 || seconds > 59) {
                return;
            }
        
            postNUI('CloseMenu');
        
            this.totalTime = minutes * 60 + seconds;
            this.Show.EnterTimer = false;
            this.Show.Timer = true;
        
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
        
            this.intervalId = setInterval(() => {
                if (this.totalTime == 2) {
                    postNUI('LastTimerSecond');
                }

                if (this.totalTime <= 0) {
                    clearInterval(this.intervalId);
                    postNUI('TimerFinish');
                    return;
                }
        
                this.totalTime--;
                this.displayTime();
            }, 1000);
        
            setTimeout(() => {
                this.displayTime();
            }, 0);
        },
        displayTime() {
            const minutes = Math.floor(this.totalTime / 60);
            const seconds = this.totalTime % 60;
            document.getElementById('remaining-minutes').innerText = String(minutes).padStart(2, '0');
            document.getElementById('remaining-seconds').innerText = String(seconds).padStart(2, '0');
        },
        startDragging(e) {
            this.isDragging = true;
            this.startX = e.pageX - this.$refs.scrollableDiv.offsetLeft;
            this.scrollLeft = this.$refs.scrollableDiv.scrollLeft;
            this.$refs.scrollableDiv.style.cursor = "grabbing";
        },
        onDragging(e) {
            if (!this.isDragging) return;
            const x = e.pageX - this.$refs.scrollableDiv.offsetLeft;
            const walk = (x - this.startX) * 1; // Kaydırma hızı
            this.$refs.scrollableDiv.scrollLeft = this.scrollLeft - walk;
        },
        stopDragging() {
            this.isDragging = false;
            this.$refs.scrollableDiv.style.cursor = "grab";
        },
        OpenStoreToCraft() {
            this.Show.Store = false;
            this.Show.Craft = true;

            this.ActiveCraft = this.Crafts[0];
        },
        OpenCraftToStore() {
            this.Show.Craft = false;
            this.Show.Store = true;

            this.ActiveCar = this.Cars[0];
        },
        startTimer() {
            this.seconds = 0;
            this.timer = setInterval(() => {
                this.seconds++;
            }, 1000);
        },
    },
    computed: {
        filteredProducts() {
          if (this.ActiveCategory.id === 'all') {
            return this.Cars;
          } else {
            if (this.Cars) {
                return this.Cars.filter(product => product.item.category === this.ActiveCategory.id);
            }
          }
        },
        formattedTime() {
            const minutes = Math.floor(this.remainingTime / 60);
            const seconds = this.remainingTime % 60;
            return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
        },
        getMinTime() {
            const minutes = Math.floor(this.remainingTime / 60);
            return minutes;
        },
        timers() {
            const hours = String(Math.floor(this.seconds / 3600)).padStart(2, '0');
            const minutes = String(Math.floor((this.seconds % 3600) / 60)).padStart(2, '0');
            const secs = String(this.seconds % 60).padStart(2, '0');
            return `${hours}:${minutes}:${secs}`;
        }
    },
    mounted() {
        window.addEventListener("message", this.messageHandler);
        window.addEventListener("keyup", this.keyHandler);
        window.addEventListener("click", this.handleClickOutside);
        this.initializePaths();
        this.startTimer();
    },
    beforeDestroy() {
        window.removeEventListener("message", this.messageHandler);
        window.removeEventListener("click", this.handleClickOutside);
        window.removeEventListener("keyup", this.keyHandler);
    },
    beforeUnmount() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    },
});


app.mount("#app");

var resourceName = "0r-rccar";

if (window.GetParentResourceName) {
    resourceName = window.GetParentResourceName();
}

window.postNUI = async (name, data) => {
    try {
        const response = await fetch(`https://${resourceName}/${name}`, {
            method: "POST",
            mode: "cors",
            cache: "no-cache",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json"
            },
            redirect: "follow",
            referrerPolicy: "no-referrer",
            body: JSON.stringify(data)
        });

        return await response.json()
    } catch (error) {
        return null;
    }
};