// import Icon from "@ant-design/icons";
// import { Button, Dropdown, Menu, notification } from "antd";
// import React, { useState } from "react";
// import { useMutation, useQuery } from "@apollo/client";
// import { Responsive, WidthProvider } from "react-grid-layout";
// import { useTranslation } from "react-i18next";
// import { MdClose } from "react-icons/md";
// import { connect } from "react-redux";
// import { createStructuredSelector } from "reselect";
// import { logImEXEvent } from "../../firebase/firebase.utils";
// import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
// import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
// import {
//   selectBodyshop,
//   selectCurrentUser,
// } from "../../redux/user/user.selectors";
// import AlertComponent from "../alert/alert.component";
// import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
// import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
// import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
// import DashboardTotalProductionHours from "../dashboard-components/total-production-hours/total-production-hours.component";
// import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
// //Combination of the following:
// // /node_modules/react-grid-layout/css/styles.css
// // /node_modules/react-resizable/css/styles.css
// import "./dashboard-grid.styles.css";
// import "./dashboard-grid.styles.scss";

// const ResponsiveReactGridLayout = WidthProvider(Responsive);

// const mapStateToProps = createStructuredSelector({
//   currentUser: selectCurrentUser,
//   bodyshop: selectBodyshop,
// });
// const mapDispatchToProps = (dispatch) => ({
//   //setUserLanguage: language => dispatch(setUserLanguage(language))
// });

// export function DashboardGridComponent({ currentUser, bodyshop }) {
//   const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
//   const { t } = useTranslation();
//   const [state, setState] = useState({
//     layout: bodyshop.associations[0].user.dashboardlayout || [
//       { i: "ProductionDollars", x: 0, y: 0, w: 2, h: 2 },
//       //  { i: "ProductionHours", x: 2, y: 0, w: 2, h: 2 },
//     ],
//   });
//   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);

//   const handleLayoutChange = async (newLayout) => {
//     logImEXEvent("dashboard_change_layout");
//     setState({ ...state, layout: newLayout });
//     const result = await updateLayout({
//       variables: { email: currentUser.email, layout: newLayout },
//     });

//     if (!!result.errors) {
//       notification["error"]({
//         message: t("dashboard.errors.updatinglayout", {
//           message: JSON.stringify(result.errors),
//         }),
//       });
//     }
//   };

//   const handleRemoveComponent = (key) => {
//     logImEXEvent("dashboard_remove_component", { name: key });

//     const idxToRemove = state.layout.findIndex((i) => i.i === key);
//     const newLayout = state.layout;
//     newLayout.splice(idxToRemove, 1);
//     handleLayoutChange(newLayout);
//   };

//   const handleAddComponent = (e) => {
//     logImEXEvent("dashboard_add_component", { name: e });

//     handleLayoutChange([
//       ...state.layout,
//       {
//         i: e.key,
//         x: (state.layout.length * 2) % (state.cols || 12),
//         y: Infinity, // puts it at the bottom
//         w: componentList[e.key].w || 2,
//         h: componentList[e.key].h || 2,
//       },
//     ]);
//   };

//   const onBreakpointChange = (breakpoint, cols) => {
//     setState({ ...state, breakpoint: breakpoint, cols: cols });
//   };

//   const existingLayoutKeys = state.layout.map((i) => i.i);
//   const addComponentOverlay = (
//     <Menu onClick={handleAddComponent}>
//       {Object.keys(componentList).map((key) => (
//         <Menu.Item
//           key={key}
//           value={key}
//           disabled={existingLayoutKeys.includes(key)}
//         >
//           {componentList[key].label}
//         </Menu.Item>
//       ))}
//     </Menu>
//   );

//   if (error) return <AlertComponent message={error.message} type="error" />;

//   return (
//     <div>
//       <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
//         <Button>{t("dashboard.actions.addcomponent")}</Button>
//       </Dropdown>
//       <ResponsiveReactGridLayout
//         className="layout"
//         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
//         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
//         width="100%"
//         onLayoutChange={handleLayoutChange}
//         onBreakpointChange={onBreakpointChange}
//       >
//         {state.layout.map((item, index) => {
//           const TheComponent = componentList[item.i].component;
//           return (
//             <div key={item.i} data-grid={item}>
//               <LoadingSkeleton loading={loading}>
//                 <Icon
//                   component={MdClose}
//                   key={item.i}
//                   style={{
//                     position: "absolute",
//                     zIndex: "2",
//                     right: ".25rem",
//                     top: ".25rem",
//                     cursor: "pointer",
//                   }}
//                   onClick={() => handleRemoveComponent(item.i)}
//                 />
//                 <TheComponent
//                   className="dashboard-card"
//                   size="small"
//                   style={{ height: "100%", width: "100%" }}
//                 />
//               </LoadingSkeleton>
//             </div>
//           );
//         })}
//       </ResponsiveReactGridLayout>
//     </div>
//   );
// }

// export default connect(
//   mapStateToProps,
//   mapDispatchToProps
// )(DashboardGridComponent);

// const componentList = {
//   ProductionDollars: {
//     label: "Production Dollars",
//     component: DashboardTotalProductionDollars,
//     w: 2,
//     h: 1,
//   },
//   ProductionHours: {
//     label: "Production Hours",
//     component: DashboardTotalProductionHours,
//     w: 2,
//     h: 1,
//   },
//   ProjectedMonthlySales: {
//     label: "Projected Monthly Sales",
//     component: DashboardProjectedMonthlySales,
//     w: 2,
//     h: 1,
//   },
//   MonthlyRevenueGraph: {
//     label: "Monthly Sales Graph",
//     component: DashboardMonthlyRevenueGraph,
//     w: 2,
//     h: 2,
//   },
// };