import {
  DataGrid,
  type DataGridProps,
  type GridColumnVisibilityModel,
} from "@mui/x-data-grid";
import { Stack, Button, Typography, Box } from "@mui/material";
import { ExportButton } from "@refinedev/mui";
import { useExport } from "@refinedev/core";
import React, { useState, useEffect, useMemo } from "react";
import Cookies from "js-cookie";

import { localeText } from "../locales/ru/localeText";
import { languageStore } from "../store/LanguageStore";
import { LanguageSwitch } from "./LanguageSwitch";

interface CustomDataGridProps extends DataGridProps {
  hasCoordinates?: boolean;
  resource?: string; // Add this prop
  languageEnabled?: boolean;
}

const DEV_FIELDS = [
  "id",
  "code",
  "country_code",
  "city_id",
  "carrier_id",
  "main_color",
  "left_color",
  "right_color",
  "logo",
  "slogan",
  "filename",
  "arms",
  "thumbnail",
  "route_sys_number",
  "governor_appeal",
  "scale_min",
  "scale_max",
  "rotate",
  "center_latitude",
  "center_longitude",
  "watermark_lu",
  "watermark_rd",
  "left_article",
  "preview_article",
  "offset_x",
  "offset_y",
] as const;

export const CustomDataGrid = ({
  languageEnabled = false,
  hasCoordinates = false,
  columns = [],
  resource,
  ...props
}: CustomDataGridProps) => {
  // const isDev = import.meta.env.DEV
  const { triggerExport, isLoading: exportLoading } = useExport({
    resource: resource ?? "",
    // pageSize: 100, #*
    // maxItemCount: 100, #*
  });

  const initialShowCoordinates = Cookies.get("showCoordinates") === "true";
  const initialShowDevData = false; // Default to false in both prod and dev
  const [showCoordinates, setShowCoordinates] = useState(
    initialShowCoordinates
  );
  const [showDevData, setShowDevData] = useState(
    Cookies.get("showDevData") === "true"
  );

  const availableDevFields = useMemo(
    () =>
      DEV_FIELDS.filter((field) =>
        columns.some((column) => column.field === field)
      ),
    [columns]
  );

  const initialVisibilityModel = useMemo(() => {
    const model: GridColumnVisibilityModel = {};

    availableDevFields.forEach((field) => {
      model[field] = initialShowDevData;
    });

    if (hasCoordinates) {
      model.latitude = initialShowCoordinates;
      model.longitude = initialShowCoordinates;
    }

    return model;
  }, [
    availableDevFields,
    hasCoordinates,
    initialShowCoordinates,
    initialShowDevData,
  ]);

  const [columnVisibilityModel, setColumnVisibilityModel] =
    useState<GridColumnVisibilityModel>(initialVisibilityModel);

  useEffect(() => {
    setColumnVisibilityModel((prevModel) => {
      const newModel = { ...prevModel };

      availableDevFields.forEach((field) => {
        newModel[field] = showDevData;
      });

      if (hasCoordinates) {
        newModel.latitude = showCoordinates;
        newModel.longitude = showCoordinates;
      }

      return newModel;
    });

    if (hasCoordinates) {
      Cookies.set("showCoordinates", String(showCoordinates));
    }
    Cookies.set("showDevData", String(showDevData));
  }, [showCoordinates, showDevData, hasCoordinates, availableDevFields]);

  const toggleCoordinates = () => {
    setShowCoordinates((prev) => !prev);
  };

  const toggleDevData = () => {
    setShowDevData((prev) => !prev);
  };

  return (
    <Stack spacing={2}>
      <Box sx={{ visibility: languageEnabled ? "visible" : "hidden" }}>
        <LanguageSwitch />
      </Box>
      <DataGrid
        {...props}
        columns={columns}
        localeText={localeText}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={setColumnVisibilityModel}
        // Добавляем базовые функции сортировки и фильтрации
        sortingMode="client"
        filterMode="client"
        initialState={{
          // pagination: {
          //   paginationModel: {pageSize: 25, page: 0},
          // },
          sorting: {
            sortModel: [{ field: "id", sort: "asc" }],
          },
        }}
        pageSizeOptions={[10, 25, 50, 100]}
      />
      <Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
        <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
          {hasCoordinates && (
            <Button variant="contained" onClick={toggleCoordinates}>
              {showCoordinates ? "Скрыть координаты" : "Показать координаты"}
            </Button>
          )}

          {(import.meta.env.DEV || showDevData) &&
            availableDevFields.length > 0 && (
              <Button variant="contained" onClick={toggleDevData}>
                {showDevData
                  ? "Скрыть служебные данные"
                  : "Показать служебные данные"}
              </Button>
            )}
        </Stack>

        <ExportButton
          onClick={triggerExport}
          loading={exportLoading}
          hideText={false}
        >
          <Typography sx={{ marginLeft: "-2px" }}>Экспорт</Typography>
        </ExportButton>
      </Stack>
    </Stack>
  );
};