document.addEventListener('alpine:init', () => {
    Alpine.data('settingsPageMobileEdit', () => ({
        // 0. Init dijalankan sebelum inisialisasi
        init() {
            let itemEdit = localStorage.getItem('itemEditMobile');
            if (itemEdit) {
                let json = JSON.parse(itemEdit);

                this.selectedJenis = {
                    idJenis: json.idJenis || -1,
                    namaJenis: json.namaJenis || 'Jenis'
                };

                this.port = json.port || '';
                this.server = json.server || '';

                this.selectedInterface = {
                    idInterface: json.idInterface || -1,
                    namaInterface: json.namaInterface || 'Interface'
                };

                this.selectedInstrument = {
                    idInstrument: json.idInstrument || -1,
                    namaInstrument: json.namaInstrument || 'Instrument'
                };

                this.selectedSerial = {
                    idSerial: json.idSerial || -1,
                    namaSerial: json.namaSerial || 'Serial'
                };

                this.speed = json.speed || '';

                this.selectedParity = {
                    idParity: json.idParity || -1,
                    namaParity: json.namaParity || 'Parity'
                };

                this.selectedDataBit = {
                    idDataBit: json.idDataBit || -1,
                    namaDataBit: json.namaDataBit || 'Data Bit'
                };

                this.selectedStopBit = {
                    idStopBit: json.idStopBit || -1,
                    namaStopBit: json.namaStopBit || 'Stop Bit'
                };
            }
        },
        // 1. Inisialisasi Start
        objAddForm: {
            // idJenis 1
            port: '',
            idInterface: -1,
            namaInterface: '',
            idInstrument: -1,
            namaInstrument: '',
            // idJenis 2 ketambahan server
            server: '',
            // idJenis 3 
            idSerial: -1,
            namaSerial: '',
            speed: '',
            idParity: -1,
            namaParity: '',
            idDataBit: -1,
            namaDataBit: '',
            idStopBit: -1,
            namaStopBit: ''
        },
        openJenis: false,
        selectedJenis: {
            idJenis: -1,
            namaJenis: 'Jenis'
        },
        dataJenis: [
            {
                idJenis: 1,
                namaJenis: 'TCP Server',
            },
            {
                idJenis: 2,
                namaJenis: 'TCP Client',
            },
            {
                idJenis: 3,
                namaJenis: 'RS232',
            },
        ],
        selectedInterface: {
            idInterface: -1,
            namaInterface: 'Interface'
        },
        openInterface: false,
        dataInterface: [
            {
                idInterface: 1,
                namaInterface: 'XN550',
            },
            {
                idInterface: 2,
                namaInterface: 'Axsym',
            },
            {
                idInterface: 3,
                namaInterface: 'C311',
            },
        ],
        selectedInstrument: {
            idInstrument: -1,
            namaInstrument: 'Instrument'
        },
        openInstrument: false,
        dataInstrument: [
            {
                idInstrument: 1,
                namaInstrument: 'Hema 01',
            },
            {
                idInstrument: 2,
                namaInstrument: 'Axsym',
            },
            {
                idInstrument: 3,
                namaInstrument: 'Cobas C311',
            },
        ],
        selectedSerial: {
            idSerial: -1,
            namaSerial: 'Serial'
        },
        openSerial: false,
        dataSerial: [
            {
                idSerial: 1,
                namaSerial: 'ttyS0'
            },
            {
                idSerial: 2,
                namaSerial: 'psx3'
            },
        ],
        selectedParity: {
            idParity: -1,
            namaParity: 'Parity'
        },
        openParity: false,
        dataParity: [
            {
                idParity: 1,
                namaParity: 'None'
            },
            {
                idParity: 2,
                namaParity: 'All'
            },
        ],
        selectedDataBit: {
            idDataBit: -1,
            namaDataBit: 'DataBit'
        },
        openDataBit: false,
        dataDataBit: [
            {
                idDataBit: 1,
                namaDataBit: '1'
            },
            {
                idDataBit: 2,
                namaDataBit: '6'
            },
        ],
        selectedStopBit: {
            idStopBit: -1,
            namaStopBit: 'StopBit'
        },
        openStopBit: false,
        dataStopBit: [
            {
                idStopBit: 1,
                namaStopBit: '0'
            },
            {
                idStopBit: 2,
                namaStopBit: '1'
            },
        ],
        // 1. Inisialisasi End
        // 2. Fungsi Start
        onChangeJenis(item) {
            let itemEdit = localStorage.getItem('itemEditMobile');
            if (itemEdit != null) {
                let json = JSON.parse(itemEdit);

                this.selectedJenis = {
                    idJenis: json.idJenis || -1,
                    namaJenis: json.namaJenis || 'Jenis'
                };

                this.port = json.port || '';
                this.server = json.server || '';

                this.selectedInterface = {
                    idInterface: json.idInterface || -1,
                    namaInterface: json.namaInterface || 'Interface'
                };

                this.selectedInstrument = {
                    idInstrument: json.idInstrument || -1,
                    namaInstrument: json.namaInstrument || 'Instrument'
                };

                this.selectedSerial = {
                    idSerial: json.idSerial || -1,
                    namaSerial: json.namaSerial || 'Serial'
                };

                this.speed = json.speed || '';

                this.selectedParity = {
                    idParity: json.idParity || -1,
                    namaParity: json.namaParity || 'Parity'
                };

                this.selectedDataBit = {
                    idDataBit: json.idDataBit || -1,
                    namaDataBit: json.namaDataBit || 'Data Bit'
                };

                this.selectedStopBit = {
                    idStopBit: json.idStopBit || -1,
                    namaStopBit: json.namaStopBit || 'Stop Bit'
                };
            } else {
                // clear selected
                this.selectedInterface = {
                    idInterface: -1,
                    namaInterface: 'Interface'
                };
                this.selectedInstrument = {
                    idInstrument: -1,
                    namaInstrument: 'Instrument'
                }
                this.selectedSerial = {
                    idSerial: -1,
                    namaSerial: 'Serial'
                },
                this.selectedParity = {
                    idParity: -1,
                    namaParity: 'Parity'
                },
                this.selectedDataBit = {
                    idDataBit: -1,
                    namaDataBit: 'DataBit'
                },
                this.selectedStopBit = {
                    idStopBit: -1,
                    namaStopBit: 'StopBit'
                }
            }

            this.openJenis = false;
            this.selectedJenis = item;

            // clear form
            this.objAddForm = {
                port: '',
                idInterface: -1,
                namaInterface: '',
                idInstrument: -1,
                namaInstrument: '',
                server: '',
                idSerial: -1,
                namaSerial: '',
                speed: '',
                idParity: -1,
                namaParity: '',
                idDataBit: -1,
                namaDataBit: '',
                idStopBit: -1,
                namaStopBit: ''
            };
        },
        onChangeInterface(item) {
            this.openInterface = false;
            this.selectedInterface = item;
        },
        onChangeInstrument(item) {
            this.openInstrument = false;
            this.selectedInstrument = item;
        },
        onChangeSerial(item) {
            this.openSerial = false;
            this.selectedSerial = item;
        },
        onChangeParity(item) {
            this.openParity = false;
            this.selectedParity = item;
        },
        onChangeDataBit(item) {
            this.openDataBit = false;
            this.selectedDataBit = item;
        },
        onChangeStopBit(item) {
            this.openStopBit = false;
            this.selectedStopBit = item;
        },
    }))
})