import { Box, Typography } from "@mui/material";
//import { getTableIcons } from "common/ResponsiveTable";
//import MaterialTable from "material-table";
import { pond } from "protobuf-ts/pond";
import { useEffect, useState } from "react";
import { distanceConversion, getDistanceUnit } from "utils";
import { Cable, jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import { cloneDeep } from "lodash";
import ResponsiveTable, { Column } from "common/ResponsiveTable";

interface Props {
  bin: jsonBin;
  cablesChanged: (newCables: Cable[]) => void;
}

export default function CableTable(props: Props) {
  const { bin, /*cablesChanged*/ } = props;
  //const nodeSpacing = 4; //space between the nodes in feet

  const [cableData, setCableData] = useState(bin.Cables);

  useEffect(() => {
    let convertedCables: Cable[] = cloneDeep(bin.Cables);
    convertedCables.forEach(cable => {
      cable.Length = Math.round(distanceConversion(cable.Length) * 100) / 100;
    });
    setCableData(convertedCables);
  }, [bin]);

  // const table = () => {
  //   return (
  //     <MaterialTable
  //       data={cableData}
  //       title={
  //         <Typography style={{ fontSize: 20, fontWeight: 650 }}>Recommended Cables</Typography>
  //       }
  //       icons={getTableIcons()}
  //       editable={{
  //         onRowUpdate: (newCable, oldCable) =>
  //           new Promise((resolve, reject) => {
  //             const dataUpdate = [...cableData];
  //             if (oldCable) {
  //               //make sure the cables lengths are in feet
  //               if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
  //                 newCable.Length = newCable.Length * 3.281;
  //                 oldCable.Length = oldCable.Length * 3.281;
  //               }
  //               //if the length was eddited
  //               if (oldCable.Length !== newCable.Length) {
  //                 //recalc the number of nodes
  //                 newCable.Nodes = Math.ceil(newCable.Length / nodeSpacing);
  //               }
  //               const index = dataUpdate.indexOf(oldCable);
  //               //this line seems ridiculous, however the browser seems to see newCable.Count as a string if it was the one that was edited in the table
  //               newCable.Count = parseInt(newCable.Count.toString());
  //               dataUpdate[index] = newCable;
  //             }
  //             resolve(cablesChanged(dataUpdate));
  //           })
  //       }}
  //       columns={[
  //         {
  //           title: <Typography style={{ fontSize: 15, fontWeight: 650 }}>Orbit</Typography>,
  //           render: (row: Cable) => <div>{row.Orbit === 0 ? "Center" : row.Orbit.toString()}</div>
  //         },
  //         {
  //           title: <Typography style={{ fontSize: 15, fontWeight: 650 }}>Type</Typography>,
  //           render: (row: Cable) => <div>{row.Type === 2 ? "Moisture" : "Temperature"}</div>
  //         },
  //         {
  //           title: (
  //             <Typography style={{ fontSize: 15, fontWeight: 650 }}>Number of Cables</Typography>
  //           ),
  //           field: "Count",
  //           initialEditValue: 0,
  //           type: "numeric"
  //         },
  //         {
  //           title: (
  //             <Typography style={{ fontSize: 15, fontWeight: 650 }}>
  //               Length{getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"}
  //             </Typography>
  //           ),
  //           field: "Length",
  //           initialEditValue: 0,
  //           type: "numeric"
  //         },
  //         {
  //           title: (
  //             <Typography style={{ fontSize: 15, fontWeight: 650 }}>Nodes Per Cable</Typography>
  //           ),
  //           editable: "never",
  //           type: "numeric",
  //           field: "Nodes"
  //         }
  //       ]}
  //       options={{
  //         search: false,
  //         paging: false
  //       }}
  //     />
  //   );
  // };

  const columns: Column<Cable>[] = [
    {
      title: "Orbit",
      render: (row: Cable) => <Box padding={2}>{row.Orbit === 0 ? "Center" : row.Orbit.toString()}</Box>
    },
    {
      title: "Type",
      render: (row: Cable) => <Box padding={2}>{row.Type === 2 ? "Moisture" : "Temperature"}</Box>
    },
    {
      title: "Number of Cables",
      render: (row) => <Box padding={2}>{row.Count}</Box>
    },
    {
      title: "Length" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
      render: (row) => <Box padding={2}>{row.Length}</Box>
    },
    {
      title: "Nodes Per Cable",
      render: (row) => <Box padding={2}>{row.Nodes}</Box>
    }
  ]

  //TODO: in order to add back in the editable functionality will need to add that to the responsive table
  return (
    <ResponsiveTable 
      title={<Typography style={{ fontSize: 20, fontWeight: 650 }}>Recommended Cables</Typography>}
      columns={columns}
      rows={cableData}
      page={0}
      pageSize={0}
      total={0}
      setPage={()=>{}}
      handleRowsPerPageChange={()=>{}}
      hidePagination
    />
  );
}
