import { Box, Typography } from "@mui/material";
import { jsonBin, CableSum, getBracket } from "common/DataImports/BinCables/BinCableImporter";
import ResponsiveTable, { Column } from "common/ResponsiveTable";
//import { getTableIcons } from "common/ResponsiveTable";
//import MaterialTable from "material-table";
import { pond } from "protobuf-ts/pond";
import { distanceConversion } from "utils";
import { useGlobalState } from "providers";

interface Props {
  bin: jsonBin;
}

export default function CableMounting(props: Props) {
  const { bin } = props;
  const [{ user }] = useGlobalState();
  // const [tablePage, setTablePage] = useState(0)
  // const [pageSize, setPageSize] = useState(10)

  const roofDist = (distance: number) => {
    return distance / Math.cos(bin.RoofAngle * (Math.PI / 180));
  };

  const columns: Column<CableSum>[] = [
    {
      title: "Orbit",
      render: (row: CableSum) => <Box padding={2}>{row.Orbit === 0 ? "Center" : row.Orbit}</Box>
    },
    {
      title: "From Center " + (user.distanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
      render: (row: CableSum) => (
        <Box padding={2}>
        {distanceConversion(row.DistanceFromCenter, user.distanceUnit()).toFixed(2)}
      </Box>
      )
    },
    {
      title: "Along Roof" + (user.distanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
      render: (row: CableSum) => (
        <Box padding={2}>
        {distanceConversion(roofDist(row.DistanceFromCenter), user.distanceUnit()).toFixed(2)}
      </Box>
      )
    },
    {
      title: "Bracket",
      render: (row: CableSum) => {
        let bracketType = "None"
        let bracket = getBracket(row.Bracket)
        if(row.Orbit !== 0 && bracket !== undefined) {
          bracketType = bracket.Name + " (" + row.NumberOfCables + ")"
        }else {
          bracketType = "Unknown"
        }
        return (
          <Box padding={2}>
            {bracketType}
          </Box>
        )
      }
    }
  ]

  return (
    <ResponsiveTable<CableSum>
      title={<Typography style={{ fontSize: 20, fontWeight: 650 }}>Install Guide</Typography>}
      rows={bin.CableSums}
      columns={columns}
      page={0}
      pageSize={0}
      handleRowsPerPageChange={()=>{}}
      setPage={()=>{}}
      total={0}
      hidePagination
    />
  )
}