import { Box, Button, FormControl, Grid2 as Grid, MenuItem, Select, Tab, Tabs, TextField, Typography, useTheme } from "@mui/material";
import PageContainer from "./PageContainer";
import { pond } from "protobuf-ts/pond";
import LogsDisplay from "common/LogsDisplay";
import { useEffect, useState } from "react";
import { useDeviceAPI, useSnackbar } from "hooks";
import { useLocation, useParams } from "react-router-dom";
import { Component, Device, Interaction } from "models";
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
import SmartBreadcrumb from "common/SmartBreadcrumb";
import { DevicePageData } from "./Device";
import AddComponentManualDialog from "component/AddComponentManualDialog";
import { useGlobalState } from "providers";
import DeviceActions from "device/DeviceActions";
import { cloneDeep } from "lodash";
import { FindAvailablePositions } from "pbHelpers/DeviceAvailability";
import LoadingScreen from "app/LoadingScreen";
import DeviceOverview from "device/DeviceOverview";

interface TabPanelProps {
  children?: React.ReactNode;
  index: any;
  value: any;
}

function TabPanelMine(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      aria-labelledby={`simple-tab-${index}`}
      {...other}>
      {value === index && <>{children}</>}
    </div>
  );
}

export default function DeviceSupport() {
  const deviceID = +(useParams<{ deviceID: string }>()?.deviceID ?? "0");

  const deviceAPI = useDeviceAPI()
  const snackbar = useSnackbar()
  const theme = useTheme()

  const { state } = useLocation();
	const [{ user, as }] = useGlobalState()
  const [device, setDevice] = useState<Device>(Device.create())
  const [devicePageData, setDevicePageData] = useState<DevicePageData>(state?.devicePageData ? state.devicePageData : undefined)
  const [tabNumber, setTabNumber] = useState(0)
  const [newCap, setNewCap] = useState(0);
  const [datacap, setDatacap] = useState<number>();
  const [isOver, setIsOver] = useState(undefined);
  const [pauseCheck, setPauseCheck] = useState(undefined);
  const [inputFirmware, setInputFirmware] = useState<string>("");
  const [platform, setPlatform] = useState<pond.DevicePlatform>(
    pond.DevicePlatform.DEVICE_PLATFORM_INVALID
  );
	const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
	const [loading, setLoading] = useState(false)

  // useEffect(() => {
  //   if (state?.device) return
  //   deviceAPI.get(deviceID, undefined, getContextKeys(), getContextTypes()).then(resp => {
  //     setDevice(Device.create(resp.data))
  //   })
  // }, [deviceID, state?.device])

	useEffect(() => {
    if (state?.devicePageData) {
			setDevice(Device.create(state?.devicePageData.device))
			return
		}
		setLoading(true)
    deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
      setDevice(resp.data?.device ? Device.create(resp.data?.device) : Device.create())
			setDevicePageData({
				device: resp.data.device ? Device.create(resp.data.device) : Device.create(),
				components: resp.data.components.map(comp => Component.create(comp)),
				interactions: resp.data.interactions.map(interaction => Interaction.create(interaction)),
				permissions: resp.data.permissions,
				preferences: resp.data.user?.preferences as pond.DevicePreferences
			})
    }).finally(() => {
			setLoading(false)
		})
  }, [deviceID, state?.devicePageData])

  const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
    setTabNumber(newValue);
  };

  const resetQuackCount = () => {
    deviceAPI.resetQuackCount(device.id()).then(resp => console.log(resp));
  };

  const resetQuackCountTx = () => {
    deviceAPI.resetQuackCountTx(device.id()).then(resp => console.log(resp));
  };

  const resetQuackCountTx1000 = () => {
    deviceAPI.resetQuackCountTx1000(device.id()).then(resp => console.log(resp));
  };

  const clearPending = () => {
    deviceAPI.clearPending(device.id()).then(resp => {
      console.log(resp);
    });
  };

  const setFirmwareVersion = (firmwareVersion: string) => {
    let status = device.status;
    status.firmwareVersion = firmwareVersion;
    deviceAPI.updateStatus(device.id(), status).then(() => {
      snackbar.info("Firmware version set to " + firmwareVersion);
    });
  };

  const updateDevicePlatform = (firmwareVersion: pond.DevicePlatform) => {
    let settings = device.settings;
    settings.platform = firmwareVersion;
    deviceAPI.update(device.id(), settings).then(() => {
      snackbar.info("Platform set to " + firmwareVersion.toString());
    });
  };

  const getDatacap = () => {
    deviceAPI.getDatacap(device.id()).then(resp => {
      //console.log(resp);
      setDatacap(resp.data.overlimit);
    });
  };

  const updateDatacap = () => {
    deviceAPI.setDatacap(device.id(), newCap).then(resp => {
      console.log(resp);
    });
  };

  const checkLimit = () => {
    deviceAPI.isOverLimit(device.id()).then(resp => {
      //console.log(resp);
      setIsOver(resp.data);
    });
  };

  const checkIfPaused = () => {
    deviceAPI.isPaused(device.id()).then(resp => {
      //console.log(resp);
      setPauseCheck(resp.data);
    });
  };

  const pauseDevice = () => {
    deviceAPI.pause(device.id()).then(resp => {
      console.log(resp);
    });
  };

  const resumeDevice = () => {
    deviceAPI.resume(device.id()).then(resp => {
      console.log(resp);
    });
  };

	const toggleNotificationPreference = () => {
		let updatedPreferences = cloneDeep(devicePageData.preferences);
		updatedPreferences.notify = !devicePageData.preferences.notify;
		let updatedDevicePageData = cloneDeep(devicePageData)
		updatedDevicePageData.preferences = updatedPreferences
		deviceAPI
			.updatePreferences(deviceID, updatedPreferences, getContextKeys(), getContextTypes(), as)
			.then(() => setDevicePageData(updatedDevicePageData))
			.catch(() => {
				snackbar.error(
					"Error occured while " +
						(devicePageData.preferences.notify ? "enabling" : "disabling") +
						" notifications"
				);
			});
	};

	if (!devicePageData) {
		return (
			<LoadingScreen message="Getting device data"/>
		)
	}

	return (
		<PageContainer>
			<Grid container justifyContent={"space-between"}>
				<Grid>
					<SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} />
				</Grid>
				<Grid>
					<DeviceActions
						device={device}
						isPaused={false}
						isLoading={loading}
						permissions={devicePageData.permissions}
						preferences={devicePageData.preferences}
						toggleNotificationPreference={toggleNotificationPreference}
						refreshCallback={() => {}}
						availablePositions={FindAvailablePositions(devicePageData.components, device.settings.product).availability}
						availableOffsets={new Map()} 
						components={[...devicePageData.components.map(comp => Component.any(comp))]}
						interactions={devicePageData.interactions.map(inter => Interaction.any(inter))}    
					/>
				</Grid>
			</Grid>
      {/* <SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} /> */}
			<DeviceOverview device={device} components={devicePageData.components}/>
			<br/>
			<Tabs
				style={{ position: "sticky" }}
				value={tabNumber}
				onChange={handleChange}
				centered
				TabIndicatorProps={{ style: { background: "rgba(255,255,0,255)" } }}>
				<Tab label="Control Center" />
				<Tab label="Hologram" />
				<Tab label="DataDog" />
				<Tab label="DuckData" />
			</Tabs>
			<TabPanelMine value={tabNumber} index={0}>
				<Box>
					<Typography gutterBottom variant="h5">
						General Options:
					</Typography>
					<Grid container direction="row">
						<Grid>
							<Button color="primary" onClick={resetQuackCount}>
								Reset Count Rx (safe, use when quack count errors)
							</Button>
							<Button color="primary" onClick={resetQuackCountTx}>
								Reset Count Tx, Are you sure (ONLY use when device not responding)
							</Button>
							<Button color="primary" onClick={resetQuackCountTx1000}>
								Reset Count Tx - 1000, Are you sure (ONLY use when device not responding)
							</Button>
						</Grid>
						
						<Grid>
							<Button color="primary" onClick={clearPending}>
								Clear Pending
							</Button>
						</Grid>
					</Grid>
					<Grid>
						<AddComponentManualDialog 
							device={device.id()}
							open={addComponentManualDialogOpen}
							onClose={() => setAddComponentManualDialogOpen(false)}
						/>
						{user.hasFeature("developer") === true && 
							<Button onClick={() => setAddComponentManualDialogOpen(true)}>
								Manual Comp
							</Button>
						}
					</Grid>
					<Grid container direction="row">
						<Grid>
							<TextField
								value={inputFirmware}
								onChange={e => setInputFirmware(e.currentTarget.value)}
							/>
							<Button color="primary" onClick={() => setFirmwareVersion(inputFirmware)}>
								Set Firmware
							</Button>
						</Grid>
					</Grid>
					<Grid container direction="row">
						<Grid>
							<FormControl>
								<Select
									labelId="demo-simple-select-label"
									id="demo-simple-select"
									value={platform}
									label="Platform"
									onChange={(event: any) => setPlatform(event.target.value)}>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_PHOTON}>Photon</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON}>
										Electron
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR}>
										V2 Cellular
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_S3}>
										V2 Wifi S3
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK}>
										V2 Cellular Black
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN}>
										V2 Cellular Green
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE}>
										V2 Wifi Blue
									</MenuItem>
									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE}>
										V2 Cellular Blue
									</MenuItem>
								</Select>
							</FormControl>
							<Button color="primary" onClick={() => updateDevicePlatform(platform)}>
								Set Platform
							</Button>
						</Grid>
					</Grid>
				</Box>
				<Box marginTop={theme.spacing(0.5)}>
					<Typography gutterBottom variant="h5">
						OPI Cable Functions:
					</Typography>
					<Grid container direction="row">
						<Grid>
							<Button color="primary">Cable Reprogrammer</Button>
						</Grid>
						<Grid>
							<Button color="primary">Cable Diagnostic</Button>
						</Grid>
					</Grid>
				</Box>
			</TabPanelMine>
			<TabPanelMine value={tabNumber} index={1}>
				<Grid container direction="column">
					<Grid container direction="row">
						<Grid>
							<TextField
								type="number"
								value={newCap}
								onChange={e => setNewCap(+e.target.value)}
							/>
						</Grid>
						<Grid>
							<Button onClick={updateDatacap} color="primary">
								Set New Datacap
							</Button>
						</Grid>
					</Grid>
					<Grid container direction="row" alignItems="center">
						<Grid>
							<Button onClick={getDatacap} color="primary">
								DataCap
							</Button>
						</Grid>
						<Grid>
							<Box margin={3}>{datacap && datacap / 1000 / 1000}Mb</Box>
						</Grid>
					</Grid>
					<Grid container direction="row" alignItems="center">
						<Grid>
							<Button onClick={checkLimit} color="primary">
								OverLimit
							</Button>
						</Grid>
						<Grid>
							<Box margin={3}>
								{isOver === undefined ? "Click to Check" : isOver ? "Over Limit" : "Under Limit"}
							</Box>
						</Grid>
					</Grid>
					<Grid container direction="row" alignItems="center">
						<Grid>
							<Button onClick={checkIfPaused} color="primary">
								Am I Paused
							</Button>
						</Grid>
						<Grid>
							<Box margin={3}>
								{pauseCheck === undefined ? "Click to Check" : pauseCheck ? "Paused" : "Running"}
							</Box>
						</Grid>
					</Grid>
				</Grid>
				<Button onClick={pauseDevice} color="primary">
					Pause Me
				</Button>
				<Button onClick={resumeDevice} color="primary">
					Get Me Goin
				</Button>
			</TabPanelMine>
			<TabPanelMine value={tabNumber} index={2}>
				<LogsDisplay deviceID={deviceID} />
			</TabPanelMine>
			<TabPanelMine value={tabNumber} index={3}>
        History Not imported yet
				{/* <CompleteHistory device={device} /> */}
			</TabPanelMine>
    </PageContainer>
	)
}