import * as React from 'react';
import Box from "@mui/material/Box";
import 'handsontable/dist/handsontable.full.min.css';
//import 'handsontable/styles/ht-theme-main.min.css';
import { HandsonTable } from 'handsontable/base';
import {HotTable} from "@handsontable/react";
//import { registerAllModules } from 'handsontable/registry';
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import Stack from "@mui/material/Stack";
//import { registerPlugin, NestedRows } from 'handsontable/plugins';
//registerPlugin(NestedRows);
import Service from './Service';
import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet
import './Tabulator.css';
import { DataGrid } from '@mui/x-data-grid';
import {extractFuzhu, match_target} from './utils';
import Button from '@mui/material/Button';
import {shanchu_djcs, undo_djcs, redo_djcs, danxiangdinge_djcs, updateDercj_djcs, changguidinge_djcs, handleBeizhu_djcs, huan, updateShuliang_djcs} from './editor';

import { textRenderer, registerRenderer } from 'handsontable/renderers';

import { Table, ConfigProvider, Button as AButton } from "antd";

import zhCN from 'antd/locale/zh_CN';


function number_equal(a, b) {
     if (Number(a) - Number(b) < 0.0001 && Number(a) - Number(b) > -0.0001) {
          return true;
     }
     return false;
}
export default function Djcs2({name, bh, rgde, jxde, clde, beizhu, beizhuFK, clickCallback, loadingCallback, dingeclick}) {
     const lastClickRef = React.useRef(null);

     const afterOnCellMouseDown = (event, coord, TD) => {
          
          if (lastClickRef.current == null) {
               lastClickRef.current = Date.now();
          } else {
               let origin = lastClickRef.current;
               lastClickRef.current = Date.now();
               let delta = lastClickRef.current - origin;
               if (delta < 300 && coord.col == 1 && coord.row > 0 && !isQdrcj.current){//300 ms -> 换
                   //tihuanCallback(coord.row, coord.col);
               }
          }
        };
     var editCheck = function(cell){
          //cell - the cell component for the editable cell
      
          //get row data
          //console.log(cell);
          if(cell._cell.row.data['序号']) return false;
          return true;
      }


     function handleSelect(row){
          //e - the click event object
          //cell - cell component
          console.log('rowSelected');
          selectedRowKeysTable.current = [row._row['data']['key']];
          let bt = "Djcs" ;
          
          if (row._row.data['序号'] != null && row._row.data['序号'].length >0) {
               selectedRowKeysTableParent.current = row._row['data']['key'];

               setFuzhu([]);
               Service.generateQingdanrcj(name, bh,bt,row._row.data['清单编码']).then(x=>{
                    setRcjhl(x);
                    isQdrcj.current=true;
                    highlight.current = [];
               });
               Service.generateQingdanTuijian(name, bh,bt,row._row.data['清单编码']).then(x=>{
                    setTuijian(x);
               });
          } else {
               
               let row_parent = row._row;
               while(row_parent.modules.dataTree.parent) {
                   row_parent = row_parent.modules.dataTree.parent;
               }
               debmRef.current = row._row['data']['清单编码'];
               selectedRowKeysTableParent.current = row_parent['data']['key'];


                             clickCallback(row_parent['data']['清单编码'], row._row['data']['清单编码']);
                             Service.generateDingercj(name, bh,bt,row_parent['data']['清单编码'], row._row['data']['清单编码']).then(x=>{
                               setRcjhl(x[0]);
                               isQdrcj.current = false;
                               setFuzhuEnable(x[1]);
                               let toHighlight = [];
                               for(let i = 1; i < x[0].length; i++) {
                                   let entry = x[0][i];
                                   let bianhao = entry[1];
                                   let rcjlb = entry[8];
                                   if (Number(rcjlb) == 1 &&  rgdeRef.current  ) {
                                      for (let j = 0;j < rgdeRef.current.length; j++) {
                                         if (rgdeRef.current[j]["CLBH"] == bianhao) {
                                              let danjia = Number(entry[5]);
                                              if (!number_equal(danjia , rgdeRef.current[j]["YSJG"])) {
                                                   console.log(`[${i},5]danjia bu yizhi`);
                                                   toHighlight.push({row: i, col: 5, });
                                              }
                                              let hanliang = Number(entry[10]);
                                              if (!number_equal(hanliang , rgdeRef.current[j]["gr"])) {
                                                   console.log(`[${i}, 10]hanliang bu yizhi`);
                                                   toHighlight.push({row: i, col: 10, });
                                              }
                                         }
                                      }

                                   }   
                                   if (Number(rcjlb) == 3 && jxdeRef.current  ) {
                                      for (let j = 0; j < jxdeRef.current.length; j++) {
                                         if (jxdeRef.current[j]["jxbh"] == bianhao) {
                                               let danjia = Number(entry[5]);
                                               if (!number_equal(danjia , jxdeRef.current[j]["tbdj"])) {
                                                    console.log(`[${i},5]danjia bu yizhi`);
                                                    toHighlight.push({row: i, col: 5, });
                                               }
                                               let hanliang = Number(entry[10]);
                                               if (!number_equal(hanliang , jxdeRef.current[j]["sl"])) {
                                                    console.log(`[${i}, 10]hanliang bu yizhi`);
                                                    toHighlight.push({row: i, col: 10, });
                                               }
                                         }
                                      }

                                   }   
                                   if (Number(rcjlb) == 2 && cldeRef.current  ) {
                                      for (let j = 0; j < cldeRef.current.length; j++) {
                                         if (cldeRef.current[j]["CLBH"] == bianhao) {
                                               let danjia = Number(entry[5]);
                                               if (!number_equal(danjia , cldeRef.current[j]["YSJG"])) {
                                                    console.log(`[${i},5]danjia bu yizhi`);
                                                    toHighlight.push({row: i, col: 5, });
                                               }
                                               let hanliang = Number(entry[10]);
                                               if (!number_equal(hanliang , cldeRef.current[j]["SL"])) {
                                                    console.log(`[${i}, 10]hanliang bu yizhi`);
                                                    toHighlight.push({row: i, col: 10, });
                                               }
                                         }
                                      }

                                   }   
                               }
                               highlight.current = toHighlight;
                             });
          }
     }
     
    registerRenderer('customStylesRenderer', (hotInstance, TD, row, column,  prop, value, ...rest) => {
         let newValue = value; 
          if ((column == 10 || column == 11 || column == 5) && row > 0) {
            newValue = Number(value).toFixed(2).toString();
         }
         textRenderer(hotInstance, TD, row, column, prop, newValue, ...rest);
         for (let i = 0; i < highlight.current.length; i++) {
          let entry = highlight.current[i];
          if (entry.row == row && entry.col == column) {
               TD.style.fontWeight = 'bold';
               TD.style.color = 'green';
               TD.style.background = '#d7f1e1';
          }
         }
       });

       
    const [detail, setDetail] = React.useState([
                    
    ]);
    const hotRcjRef = React.useRef(null);
    const myRef = React.useRef(null);
    const myTable = React.useRef(null);
    const [value, setValue] = React.useState("1");
    const [rcjhl, setRcjhl] = React.useState([]);
    const [rcjhl2, setRcjhl2] = React.useState([]);
    const [fuzhu, setFuzhu] = React.useState([]);
    const [tuijian, setTuijian] = React.useState([]);
    const beizhuFKRef = React.useRef(null);

    const [fuzhuEnable, setFuzhuEnable] = React.useState(false);

   const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
   const onSelectChange = (newSelectedRowKeys) => {
     console.log('selectedRowKeys changed: ', newSelectedRowKeys);
     setSelectedRowKeys(newSelectedRowKeys);
     const [newData, newHl] = handleBeizhu_djcs(beizhuFKRef.current, selectedRowKeysTable.current[0], newSelectedRowKeys, fuzhu);
                                  if (newData) {
                                     myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
                                     setRcjhl(newHl);

                                  }
   };
   const rowSelection = {
     selectedRowKeys,
     onChange: onSelectChange,
     getCheckboxProps: (record) => {
          return {
               disabled: !fuzhuEnable
          };
     }
   };
    const highlight = React.useRef([]);

    
    const rgdeRef = React.useRef(null);
    const jxdeRef = React.useRef(null);
    const cldeRef = React.useRef(null);
    const isQdrcj = React.useRef(false);
    const debmRef = React.useRef(null);
    const selectedRowKeysTable = React.useRef([]);
    const selectedRowKeysTableParent = React.useRef(null);
    const afterChange = (changes, source) => {
     if (changes == null || changes.every(x=>x[2] == x[3])) {

     } else {
          let data =  hotRcjRef.current?.hotInstance?.getData();
          for(let i = 1; i < data.length; i++) {
               data[i][11] = Number(data[i][10]) * Number(data[i][5]);
           }
           setRcjhl(data);
     
          let newData = updateDercj_djcs(selectedRowKeysTable.current[0], data);
          myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
               let getRow = myTable.current.getSelectedRows(); //get array of currently selected row components.
               //getRow[0].select();
               handleSelect(getRow[0]);
          });
          
          
     }
   };

    React.useEffect(() => {
     myTable.current = new Tabulator(myRef.current, {
          index: "key",
          height: 380,
        data: detail, //link data to table
        reactiveData: false, //enable data reactivity
        dataTreeStartExpanded:true,
        dataTree: true,
        selectableRows:1, //make rows selectable
        editTriggerEvent:"dblclick", //trigger edit on double click
        dataTreeStartExpanded:function(row, level){
            //console.log(row);
            //console.log(level);
            return true; //expand rows where the "driver" data field is true;
        },
        columns: [ //Define Table Columns
                     {title:"序号", field:"序号", width:80, headerSort:false, frozen: true}, //never hide this column
                     {title:"清单编码", field:"清单编码", width:120,headerSort:false, frozen: true },
                     {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                     {title:"项目特征", field:"项目特征", width:150 , headerSort:false, formatter:"textarea"},
                     {title:"计算规则", field:"计算规则", width:150, headerSort:false, formatter:"textarea"},
                     {title:"单位", field:"单位", width:100, headerSort:false},
                     {title:"数量", field:"数量", width:100, headerSort:false, editor: "input", editable: editCheck },
                     {title:"综合单价", field:"综合单价", width:100, headerSort:false, formatter:"money"},
                     {title:"合价", field:"合价", width:100, headerSort:false, formatter:"money"},
                     {title:"人工费", field:"人工费", width:100, headerSort:false, formatter:"money"},
                     {title:"主材费", field:"主材费", width:100, headerSort:false, formatter:"money"},
                     {title:"设备费", field:"设备费", width:100, headerSort:false, formatter:"money"},
                     {title:"辅材费", field:"辅材费", width:100, headerSort:false, formatter:"money"},
                     {title:"材料费", field:"材料费", width:100, headerSort:false, formatter:"money"},
                     {title:"机械费", field:"机械费", width:100, headerSort:false, formatter:"money"},
                     {title:"管理费", field:"管理费", width:100, headerSort:false, formatter:"money"},
                     {title:"利润", field:"利润", width:100, headerSort:false, formatter:"money"},
                     {title:"暂估价", field:"暂估价", width:100, headerSort:false, formatter:"money"},
                     {title:"综合人工工日", field:"综合人工工日", width:100, headerSort:false},
             ]
      }); 
      
      myTable.current.on("cellDblClick", function(e, cell){
          //e - the click event object
          //cell - cell component
          console.log(cell);
      });

      myTable.current.on("rowSelected", handleSelect);
      

      myTable.current.on("cellEdited", function(cell){
          //console.log("edited");
          //console.log();
          let key = cell._cell.row.data['key'];
          myTable.current.deselectRow();
          let [success, data] = updateShuliang_djcs(cell._cell.row.data['数量'], selectedRowKeysTable.current[0]);
          if (success) {
                           myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                              let getRow = myTable.current.getRows(); //get array of currently selected row components.
                              let component = null;
                              for(let i = 0; i < getRow.length; i++) {
                                   let entry = getRow[i]._row.modules.dataTree.children;
                                   for(let j = 0; j < entry.length; j++) {
                                        let child = entry[j];
                                        if(child.data['key'] == key) {
                                             //console.log(child);
                                             component = child.component;
                                             break;
                                        }
                                        
                                   }

                              }
                              component.select();
                              handleSelect(component);
                              //handleSelect(getRow[0]);
                           });                            
                                                       
          }
      });


      myTable.current.on("tableBuilt", () => {
          Service.generateDjcs(name, bh).then(x=>{
               myTable.current.replaceData(x);
               });
        });
    
   }, [bh]);


   React.useEffect(
     () => {
          beizhuFKRef.current = beizhuFK;
     }, [beizhuFK]
   );
 
    React.useEffect(
        () => {
            console.log(beizhu);
            let result = [];
            if (beizhu != null) { 
                let keys = Object.keys(beizhu["BZBH"]);
                for(let i = 0; i < keys.length; i++) {
                    let key = keys[i];
                    result.push({'key': i+1, '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key]});//序号很重要
                }
                setFuzhu(result);
                let newSelect = extractFuzhu(debmRef.current);
                setSelectedRowKeys(newSelect);
                //setSelectedRowKeys([1]);
                
            }
        }, [beizhu]
      );



      React.useEffect(
          () => {
               myTable.current.deselectRow();
               //console.log(dingeclick);
               if (selectedRowKeysTable.current.length > 0 ) {
                    const [success, data, key] = changguidinge_djcs(JSON.parse(dingeclick), selectedRowKeysTable.current[0]);
                    if (success) {
                         myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                              let getRow = myTable.current.getRows(); //get array of currently selected row components.
                              let component = null;
                              for(let i = 0; i < getRow.length; i++) {
                                   let entry = getRow[i]._row.modules.dataTree.children;
                                   for(let j = 0; j < entry.length; j++) {
                                        let child = entry[j];
                                        if(child.data['key'] == key) {
                                             //console.log(child);
                                             component = child.component;
                                             break;
                                        }
                                        
                                   }

                              }
                              
                              component.select();
                              handleSelect(component);

                                   
                               
                          });
                    }
               }
               
          }, [dingeclick]//常规添加定额
      );

    React.useEffect(
        () => {
          console.log("rgde changed");
          console.log(rgde);
          rgdeRef.current = rgde;
          jxdeRef.current = jxde;
          cldeRef.current = clde;
          if (isQdrcj.current) {
             highlight.current = [];
          } else {
          let toHighlight = [];
          for(let i = 1; i < rcjhl.length; i++) {
              let entry = rcjhl[i];
              let bianhao = entry[1];
              let rcjlb = entry[8];
              if (Number(rcjlb) == Number(1) && rgde) {
                  for (let j = 0; j < rgde.length; j++) {
                      if (rgde[j]["CLBH"] == bianhao) {
                          let danjia = Number(entry[5]);
                          if (!number_equal(danjia , rgde[j]["YSJG"])) {
                               console.log(`[${i},5]danjia bu yizhi`);
                               toHighlight.push({row: i, col: 5});
                          }
                          let hanliang = Number(entry[10]);
                          if (!number_equal(hanliang , rgde[j]["gr"])) {
                               console.log(`[${i}, 10]hanliang bu yizhi`);
                               toHighlight.push({row: i, col: 10});
                          }

                      }              
                  }

              }   
              if (Number(rcjlb) == Number(3) && jxde ) {
                   for (let j = 0; j < jxde.length; j++) {
                      if (jxde[j]["jxbh"] == bianhao) {
                         let danjia = Number(entry[5]);
                         if (!number_equal(danjia , jxde[j]["tbdj"])) {
                              console.log(`[${i},5]danjia bu yizhi`);
                              toHighlight.push({row: i, col: 5, });
                         }
                         let hanliang = Number(entry[10]);
                         if (!number_equal(hanliang , jxde[j]["sl"])) {
                              console.log(`[${i}, 10]hanliang bu yizhi`);
                              toHighlight.push({row: i, col: 10, });
                         }
                      }
                   }

              }   
              if (Number(rcjlb) == Number(2) && clde ) {
                   for (let j = 0; j < clde.length; j++) {
                      if (clde[j]["CLBH"] == bianhao) {
                         let danjia = Number(entry[5]);
                         if (!number_equal(danjia , clde[j]["YSJG"])) {
                              console.log(`[${i},5]danjia bu yizhi`);
                              toHighlight.push({row: i, col: 5, });
                         }
                         let hanliang = Number(entry[10]);
                         if (!number_equal(hanliang ,clde[j]["SL"])) {
                              console.log(`[${i}, 10]hanliang bu yizhi`);
                              toHighlight.push({row: i, col: 10, });
                         }
                      }
                   }

              }   
          }
          console.log(toHighlight);
          highlight.current = toHighlight;
          }


          let bzrcjhl = [["人材机编码", "名称", "单位", "单价", "合价", "含量"]] 
          if (rgde)
          for (let i = 0; i  < rgde.length; i++) {
               bzrcjhl.push([rgde[i]["CLBH"], rgde[i]["CLMC"], rgde[i]["JLDW"], rgde[i]["YSJG"], rgde[i]["gf"], rgde[i]["gr"]]);
          }
          
          if (clde)
          for (let i = 0; i  < clde.length; i++) {
               bzrcjhl.push([clde[i]["CLBH"], clde[i]["CLMC"], clde[i]["JLDW"], clde[i]["YSJG"], clde[i]["HJ"], clde[i]["SL"]]);
          }
          if (jxde)
          for (let i = 0; i  < jxde.length; i++) {
               bzrcjhl.push([jxde[i]["jxbh"], jxde[i]["jxmc"], jxde[i]["DW"], jxde[i]["tbdj"], jxde[i]["hj"], jxde[i]["sl"]]);
          }
          setRcjhl2(bzrcjhl);
        }, [rgde, jxde, clde]
      );

      const handleChange = (event, newValue) => {
        setValue(newValue);
      };


    return (

               <Stack spacing={1}>
                         <Stack direction='row' spacing={2}>
                   <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                         const [success, data] = danxiangdinge_djcs(selectedRowKeysTable.current[0]);
                         if(success) {
                            myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                              selectedRowKeysTable.current = [];
                              selectedRowKeysTableParent.current = null;
                                   setRcjhl([]);
                                   setFuzhu([]);
                                   isQdrcj.current = true;
                                   highlight.current = [];
                            });
                            //console.log(data);
                         }
                      }
                 
                      
                      }}
                   >单项定额</Button>
                      <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                          let newData = shanchu_djcs(selectedRowKeysTable.current[0]);
                          myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                              if (newData.filter(x=>x['key'] == selectedRowKeysTable.current[0]).length == 0) {
                                   selectedRowKeysTable.current = [];
                                   selectedRowKeysTableParent.current = [];
                                   setRcjhl([]);
                                   setFuzhu([]);
                                   isQdrcj.current = true;
                                   highlight.current = [];
                               }
                          });
                          
                          
                          
                      }
                      
                 
                      
                      }}
                   >删除</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = undo_djcs();
                      myTable.current.updateData(newData).then(function(){
                         
                            selectedRowKeysTable.current = [];
                            selectedRowKeysTableParent.current = null;
                            setRcjhl([]);
                            setFuzhu([]);
                            isQdrcj.current = true;
                            highlight.current = [];
                            
                        
                      });
                     
                      
                      }}
                   >撤销</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = redo_djcs();
                      myTable.current.updateData(newData).then(function(){
                         selectedRowKeysTable.current = [];
                         selectedRowKeysTableParent.current = null;

                            setRcjhl([]);
                            setFuzhu([]);
                            isQdrcj.current = true;
                            highlight.current = [];
                      });
                      
                      
                      
                      }}
                   >重做</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                            console.log("save to cloud");
                            loadingCallback();
                      
                      }}
                   >保存</Button>

                  
                   </Stack>
                 <div ref={myRef}> 
                  </div>
                   <Box >
                   
                   <TabContext value={value}>
                       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                         <TabList onChange={handleChange} aria-label="lab API tabs example"  sx={{minHeight: '24px'}}   >
                           <Tab sx={{p: 0, minHeight: '24px'}} label="人材机含量" value="1" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="标准定额人材机含量" value="2" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="定额附注" value="3" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="组价推荐" value="4" />
                         </TabList>
                       </Box>
                       <TabPanel value="1">
                          <HotTable 
                          nestedRows={false}
                             data={rcjhl
                             }
                             cells={(row, col) => {
                              if (isQdrcj.current) return {readOnly: true, renderer: "customStylesRenderer"};
                              if (col == 8) {
                                   return { readOnly: true, renderer: "customStylesRenderer" };
                              }
                              if (col <= 1 || col >= 11) {
                                  return { readOnly: true, renderer: "customStylesRenderer" };
                              } else if (row == 0){
                                   return { readOnly: true, renderer: "customStylesRenderer" };
                              } else {
                                   return { readOnly: false, renderer: "customStylesRenderer" };
                              }
                              
                            }}
                             afterChange={afterChange}
                             ref = {hotRcjRef}
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="200"
                             afterOnCellMouseDown={afterOnCellMouseDown}
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

                       </TabPanel>
                       <TabPanel value="2">
                          <HotTable 
                          nestedRows={false}
                             data={rcjhl2
                             }
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="200"
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

                       </TabPanel>
                       <TabPanel value="3">
                       <Box sx={{maxHeight: `200px`}}>
                       <ConfigProvider
                          locale={zhCN}
                          theme={{
                            components: {
                              Table: {
                                 /* here is your component tokens */
                                 cellPaddingBlock : 8
                              },
                            },
                          }}
                        >

                          <Table 
                             scroll={{ x: 'max-content' , y : 200}}
                             pagination={false}
                             rowSelection={rowSelection}
                             columns={
                              [
                                   { title: '序号', dataIndex: '序号', width : 80},
                                   {
                                        title: '编号',
                                        dataIndex: '编号',
                                     
                                   },
                                   {
                                        title: '说明',
                                        dataIndex: '说明',
                                     width: 550
                                    
                                   },
                                  
                                 ]
                             }
                           dataSource={fuzhu} />

                        </ConfigProvider>
                       </Box>
                      

                       </TabPanel>

                       <TabPanel value="4">
                          <HotTable 
                          nestedRows={false}
                             data={tuijian
                             }
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="200"
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

                       </TabPanel>
                     </TabContext>
                  </Box>

                  </Stack>



    );
}