import { Box, Checkbox, Grid2, MenuItem, TextField, Tooltip, Typography } from "@mui/material"
import { useMobile } from "hooks"
import { getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
import { quack } from "protobuf-ts/quack"
import React, { useEffect, useState } from "react"

interface Props {
  compData: quack.OneWireComponentData
  componentSelect: (selected: boolean, componentData: quack.OneWireComponentData) => void
}

export default function PortComponent(props: Props){
  const {compData, componentSelect} = props
  // const [selectedSubtype, setSelectedSubtype] = useState<number>(0)
  const [subtypeVal, setSubtypeVal] = useState("no subtype")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
  const [subtypeMap, setSubtypeMap] = useState<Map<string, number>>(new Map())
  const [subtypeOptions, setSubtypeOptions] = useState<Subtype[]>([])
  const [added, setAdded] = useState(false)
  const isMobile = useMobile()

  useEffect(()=>{
    // setSelectedSubtype(compData.subtype)
    let validSubtypes: Subtype[] = []
    let subMap: Map<string, number> = new Map()
    let subVal: string = "no subtype"
    getSubtypes(compData.type).forEach(option => {
      if(compData.subtype === option.key || compData.subtype === 0){
        validSubtypes.push(option)
        if(subVal === "no subtype"){
          subVal = option.friendlyName
        }
      }
      subMap.set(option.friendlyName, option.key)
    })
    setSubtypeOptions(validSubtypes)
    setSubtypeMap(subMap)
    setSubtypeVal(subVal)
  },[compData])

  const subtypeSelector = () => {
    return (
      <TextField
        value={subtypeVal}
        disabled={added}
        fullWidth
        onChange={(event) => {
          setSubtypeVal(event.target.value)
          // setSelectedSubtype(subtypeMap.get(event.target.value) ?? 0)
          compData.subtype = subtypeMap.get(event.target.value) ?? 0
        }}
        select>
          <MenuItem key={-1} value={"no subtype"}>Select the Component Subtype</MenuItem>
        {subtypeOptions.map((s, i) => (
          <MenuItem key={i} value={s.friendlyName}>{s.friendlyName}</MenuItem>
      ))}
      </TextField>
    )
  }

  const selectCompCheckbox = () => {
    return (
      <Tooltip 
      title="Add to list to be added to the device"
      children={
        <Checkbox 
        value={added}
        onChange={(_, checked) => {
          setAdded(checked)
          componentSelect(checked, compData)
        }}
        />
      }
      />
    )
  }

  const desktopDisplay = () => {
    return (
      <Box padding={2}>
        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
        <Grid2 size={3}>
          <Typography>
            {getFriendlyName(compData.type)}
          </Typography>
        </Grid2>
        <Grid2 size={3}>
          {subtypeOptions.length < 2 
            ? 
              <Typography>
                {subtypeVal}
              </Typography> 
            : 
              subtypeSelector()}
        </Grid2>
        <Grid2 size={2}>
          <Typography>
            Cable ID: {compData.cableId}
          </Typography> 
        </Grid2>
        <Grid2 size={2}>
          <Typography>
            Nodes: {compData.nodeCount}
          </Typography>
        </Grid2>
        <Grid2 size={1}>
        {selectCompCheckbox()}
        </Grid2>
      </Grid2>
      </Box>
    )
  }

  const mobileDisplay = () => {
    return(
      <Box padding={2}>
        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
          <Grid2 size={5}>
            <Typography>
              {getFriendlyName(compData.type)}
            </Typography>
            <Typography>
              Cable ID: {compData.cableId}
            </Typography>
            <Typography>
              Nodes: {compData.nodeCount}
            </Typography>
          </Grid2>
          <Grid2 size={5}>
            {subtypeOptions.length < 2 
              ? 
                <Typography>
                  {subtypeVal}
                </Typography> 
              : 
                subtypeSelector()}
          </Grid2>
          <Grid2 size={2}>
            {selectCompCheckbox()}
          </Grid2>
        </Grid2>
      </Box>
    )
  }

  return (
    <React.Fragment>
      {isMobile ? mobileDisplay() : desktopDisplay()}
    </React.Fragment>
  )
}