import React, { useEffect, useMemo } from "react";
import { type GridColDef } from "@mui/x-data-grid";
import {
  DeleteButton,
  EditButton,
  List,
  ShowButton,
  useDataGrid,
} from "@refinedev/mui";
import { Stack, Typography } from "@mui/material";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import { localeText } from "../../locales/ru/localeText";
import { cityStore } from "../../store/CityStore";
import { observer } from "mobx-react-lite";
import { languageStore } from "../../store/LanguageStore";

export const StationList = observer(() => {
  const { city_id } = cityStore;
  const { language } = languageStore;

  const { dataGridProps } = useDataGrid({
    resource: "station",
    meta: {
      headers: {
        "Accept-Language": language,
      },
    },
    filters: {
      permanent: [
        {
          field: "cityID",
          operator: "eq",
          value: city_id === "0" ? null : city_id,
        },
      ],
    },
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: "id",
        headerName: "ID",
        type: "number",
        minWidth: 70,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "name",
        headerName: "Название",
        type: "string",
        minWidth: 300,
        display: "flex",
        align: "left",
        headerAlign: "left",
        flex: 1,
      },
      {
        field: "system_name",
        headerName: "Системное название",
        type: "string",
        minWidth: 200,
        display: "flex",
        align: "left",
        headerAlign: "left",
        flex: 1,
      },
      {
        field: "direction",
        headerName: "Направление",
        type: "boolean",
        minWidth: 200,
        display: "flex",

        renderCell: ({ value }) => (
          <Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
            {value ? "прямой" : "обратный"}
          </Typography>
        ),
      },
      {
        field: "latitude",
        headerName: "Широта",
        type: "number",
        minWidth: 150,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "longitude",
        headerName: "Долгота",
        type: "number",
        minWidth: 150,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "city_id",
        headerName: "ID города",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "offset_x",
        headerName: "Смещение (X)",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "offset_y",
        headerName: "Смещение (Y)",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      // {
      //   field: "description",
      //   headerName: "Описание",
      //   type: "string",
      //   display: "flex",
      //   align: "left",
      //   headerAlign: "left",
      //   flex: 1,
      // },
      {
        field: "actions",
        headerName: "Действия",
        cellClassName: "station-actions",
        align: "right",
        headerAlign: "center",
        minWidth: 120,
        display: "flex",
        sortable: false,
        filterable: false,
        disableColumnMenu: true,
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton
                hideText
                confirmTitle="Вы уверены?"
                recordItemId={row.id}
              />
            </>
          );
        },
      },
    ],
    []
  );

  return (
    <List key={city_id}>
      <Stack gap={2.5}>
        <CustomDataGrid
          {...dataGridProps}
          columns={columns}
          languageEnabled
          localeText={localeText}
          getRowId={(row: any) => row.id}
          hasCoordinates
        />
      </Stack>
    </List>
  );
});