/*****************************************************************************

Copyright (c) 1998-2024, Tern Systems Inc.

All Rights Reserved.
*****************************************************************************/
// external imports
import React, { Suspense, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Outlet } from 'react-router-dom';
import useWebSocket from 'react-use-websocket';

// internal imports
import { WS_ADDRESS } from './api/api';
import {
addNewTab as adminAddNewTab,
removeTabFromDraggableAndUnDraggable as adminRemoveTab,
updateTabData as adminUpdateTab
} from './slices/adminTabsSlice';
import {
addEnrouteData,
removeEnrouteData,
selectAllEnrouteData,
updateEnrouteData
} from './slices/enrouteSlice';
import { removeMeteoData, selectAllMeteoData, updateMeteoState } from
'./slices/meteoSlice';
import {
addNotamData,
removeNotamData,
selectAllNotamData,
updateNotamData
} from './slices/notamSlice';
import { addNewTab, removeTab, selectAllTabData, updateTab } from
'./slices/tabSlice';
import {
selectCurrentLayer,
selectFlightLevelValue,
selectHourIndex,
selectHourValue,
setTemperatureData,
setWindData
} from './slices/weatherSlice';

import { addNewWikiData, removeWikiData, updateWiki } from './slices/wikiSlice';

const SocketLayout = ({
setDecodedMeteo,
decodedMeteo,
setDecodedNotam,
decodedNotam,
decodedEnroute,
setDecodedEnroute
}) => {
const dispatch = useDispatch();
const tabDataFromApi = useSelector(selectAllTabData);
const notamDataFromApi = useSelector(selectAllNotamData);
const enrouteDataFromApi = useSelector(selectAllEnrouteData);
const meteoDataFromApi = useSelector(selectAllMeteoData);
const currentFlightLevel = useSelector(selectFlightLevelValue);
const currentHour = useSelector(selectHourValue);
 const currentLayer = useSelector(selectCurrentLayer);
const currentHourIndex = useSelector(selectHourIndex);

const socketUrl = `${WS_ADDRESS}/api/metar/`;

const { lastMessage, readyState } = useWebSocket(socketUrl, {
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
});
useEffect(() => {
//if there is a message from the server and if the connection is opened add
metar data to state
if (lastMessage === null || readyState !== 1) return;

const data = [Link]([Link]);

if ([Link] === undefined) return;

const status = [Link];

if (status === 'update') {
// update the state with new data from the server
const metarData = [Link];

if (metarData !== undefined) {

const filteredData = [Link](
item =>
item.type_of_metar_report === metarData.type_of_metar_report &&
item.raw_location_indicator_icao ===
metarData.raw_location_indicator_icao
);
if ([Link] > 0) {
if (
metarData.type_of_metar_report === decodedMeteo.type_of_metar_report &&
metarData.raw_location_indicator_icao ===
decodedMeteo.raw_location_indicator_icao
) {
setDecodedMeteo(metarData);
}
dispatch(updateMeteoState(metarData));
}
}
} else if (status === 'delete') {
const metarData = [Link];
dispatch(removeMeteoData(metarData));
} else if (status === 'add') {
const metarData = [Link];
dispatch(updateMeteoState(metarData));
}
}, [lastMessage, dispatch]);

const enrouteUrl = `${WS_ADDRESS}/api/enroute-meteorological-message/`;

const { lastMessage: enrouteLastMessage, readyState: enrouteSocketReadyState } =
useWebSocket(
enrouteUrl,
{
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
}
);

useEffect(() => {
 //if there is a message from the server and if the connection is opened add
enroute data to state
if (enrouteLastMessage !== null && enrouteSocketReadyState === 1) {
const data = [Link]([Link]);
if ([Link] === undefined || [Link] === null) return;

const status = [Link];

if (status === 'update') {
// update the state with new data from the server
const enrouteData = [Link];
if (enrouteData === undefined || enrouteData === null) return;

const filteredData = [Link](

item => [Link] === [Link] && item.fir_code ===
enrouteData.fir_code
);
if ([Link] > 0) {
if (
[Link] === [Link] &&
enrouteData.fir_code === decodedEnroute.fir_code
) {
setDecodedEnroute(enrouteData);
}
dispatch(updateEnrouteData(enrouteData));
}
} else if (status === 'delete') {
const enrouteData = [Link];
dispatch(removeEnrouteData(enrouteData));
} else if (status === 'add') {
const enrouteData = [Link];
dispatch(addEnrouteData(enrouteData));
}
}
}, [enrouteLastMessage, dispatch]);

const notamUrl = `${WS_ADDRESS}/api/notam/`;

const { lastMessage: notamLastMessage, readyState: notamSocketReadyState } =
useWebSocket(
notamUrl,
{
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
}
);

useEffect(() => {
//if there is a message from the server and if the connection is opened add
notam data to state
if (notamLastMessage !== null && notamSocketReadyState === 1) {
const data = [Link]([Link]);
if ([Link] === undefined || [Link] === null) return;

const status = [Link];

if (status === 'update') {
// update the state with new data from the server
const notamData = [Link];
if (notamData === undefined || notamData === null) return;

const filteredData = [Link](

 item => item.notam_identifier === notamData.notam_identifier
);
if ([Link] > 0) {
if (notamData.notam_identifier === decodedNotam.notam_identifier) {
setDecodedNotam(notamData);
}
dispatch(updateNotamData(notamData));
}
} else if (status === 'delete') {
const notamData = [Link];
dispatch(removeNotamData(notamData));
} else if (status === 'add') {
const notamData = [Link];
dispatch(addNotamData(notamData));
}
}
}, [notamLastMessage, dispatch]);

const userToken = [Link]('tokens');

const tabUrl = `${WS_ADDRESS}/api/tab/?token=${userToken}`;
const { lastMessage: tabLastMessage, readyState: tabSocketReadyState } =
useWebSocket(tabUrl, {
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
});

function deepEqual(obj1, obj2) {

if (obj1 === obj2) {
return true;
}
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 == null ||
obj2 == null) {
return false;
}
const keys1 = [Link](obj1);
const keys2 = [Link](obj2);
if ([Link] !== [Link]) {
return false;
}
for (const key of keys1) {
if ( || !deepEqual(obj1[key], obj2[key])) {
return false;
}
}
return true;
}

function isTabExist(tabData, tabDataFromApi) {

const filteredData = [Link](item => [Link] === [Link]);
return [Link] > 0;
}

useEffect(() => {
//if there is a message from the server and if the connection is opened add
wiki data to state
if (tabLastMessage !== null && tabSocketReadyState === 1) {
const data = [Link]([Link]);
if ([Link] === undefined || [Link] === null) return;
 const status = [Link];
const tabData = [Link];

if (status === 'update') {

if (isTabExist(tabData, tabDataFromApi)) {
const currentTabFromState = [Link](item => [Link] ===
[Link]);
if (!deepEqual(tabData, currentTabFromState[0])) {
dispatch(updateTab(tabData));
}
} else {
dispatch(addNewTab(tabData));
}
dispatch(adminUpdateTab(tabData));
} else if (status === 'role_add') {
if (isTabExist(tabData, tabDataFromApi)) {
const currentTabFromState = [Link](item => [Link] ===
[Link]);
if (!deepEqual(tabData, currentTabFromState[0])) {
dispatch(updateTab(tabData));
}
} else {
dispatch(addNewTab(tabData));
}
dispatch(adminAddNewTab(tabData));
} else if (status === 'add') {
dispatch(addNewTab(tabData));
dispatch(adminAddNewTab(tabData));
} else if (status === 'role_delete') {
if (isTabExist(tabData, tabDataFromApi)) {
dispatch(removeTab(tabData));
}
} else if (status === 'delete') {
if (isTabExist(tabData, tabDataFromApi)) {
dispatch(removeTab(tabData));
}
dispatch(adminRemoveTab(tabData));
}
}
}, [tabLastMessage, dispatch]);

const wikiUrl = `${WS_ADDRESS}/api/wiki/`;

const { lastMessage: wikiMessage, readyState: wikiReadyState } =
useWebSocket(wikiUrl, {
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
});

useEffect(() => {
//if there is a message from the server and if the connection is opened add
wiki data to state
if (wikiMessage !== null && wikiReadyState === 1) {
const data = [Link]([Link]);

if ([Link] !== undefined) {

const status = [Link];
const wikiData = [Link];

if (status === 'update') {

 dispatch(updateWiki(wikiData));
} else if (status === 'delete') {
dispatch(removeWikiData(wikiData));
} else if (status === 'add') {
dispatch(addNewWikiData(wikiData));
}
}
}
}, [wikiMessage, dispatch]);

const weatherMessageUrl = `${WS_ADDRESS}/api/weather/`;

const { lastMessage: weatherMessage, readyState: weatherReadyState } =
useWebSocket(
weatherMessageUrl,
{
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
}
);

useEffect(() => {
//if there is a message from the server and if the connection is opened add
wiki data to state
if (weatherMessage !== null && weatherReadyState === 1) {
const data = [Link]([Link]);

if ([Link] !== undefined && [Link] !== undefined) {

const weatherForecastData = [Link];
const forecastType = [Link].forecast_type;

// if broadcast is wind/temperature and the current layer is wind or

temperature otherwise return
if (forecastType !== 'wind/temperature') return;
if (currentLayer === '') return;

let currentResolvedHourValue = currentHour;

if (currentHourIndex !== 0) {
currentResolvedHourValue = currentHour + 24;
}
if (
!(
parseInt(weatherForecastData.forecast_hour, 10) ===
parseInt(currentResolvedHourValue, 10) &&
parseInt(weatherForecastData.forecast_altitude, 10) ===
parseInt(currentFlightLevel, 10)
)
)
return;
if (currentLayer === 'wind') {
dispatch(setWindData([[Link]]));
} else if (currentLayer === 'temperature') {
dispatch(setTemperatureData([[Link]]));
}
}
}
}, [weatherMessage, dispatch]);

// socket connection for frequency

const externalFrequencyUrl = `${WS_ADDRESS}/api/internal-frequency/`;
 const { lastMessage: frequencyMessage, readyState: frequencyReadyState } =
useWebSocket(
externalFrequencyUrl,
{
//Will attempt to reconnect on all close events, such as server shutting down
shouldReconnect: () => true
}
);
useEffect(() => {
//if there is a message from the server and if the connection is opened add
frequency data to state
if (lastMessage === null || readyState !== 1) return;

const data = [Link]([Link]);

if ([Link] === undefined) return;

if (frequencyMessage !== null && frequencyReadyState === 1) {

const data = [Link]([Link]);
[Link](data);
if ([Link] === undefined || [Link] === null) return;
if ([Link] !== undefined) {
const status = [Link];
const frequencyData = [Link];
if (frequencyData === undefined) return;
if (frequencyData !== undefined) {
if (status === 'update') {
[Link]('update frequency');
} else if (status === 'delete') {
[Link]('delete frequency');
} else if (status === 'add') {
[Link]('add frequency');
}
}
}
}
}, [frequencyMessage, dispatch]);
return (
<div>
<Suspense>
<Outlet />
</Suspense>
</div>
);
};

export default SocketLayout;