import { type GridColDef } from "@mui/x-data-grid";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import {
  DeleteButton,
  EditButton,
  List,
  ShowButton,
  useDataGrid,
} from "@refinedev/mui";
import React from "react";
import { languageStore } from "../../store/LanguageStore";
import { observer } from "mobx-react-lite";

export const CountryList = observer(() => {
  const { language } = languageStore;

  const { dataGridProps } = useDataGrid({
    resource: "country",
    meta: {
      headers: {
        "Accept-Language": language,
      },
    },
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: "code",
        headerName: "Код",
        type: "string",
        minWidth: 150,
        align: "left",
        headerAlign: "left",
      },
      {
        field: "name",
        headerName: "Название",
        type: "string",
        minWidth: 150,
        flex: 1,
      },
      {
        field: "actions",
        headerName: "Действия",
        cellClassName: "country-actions",
        minWidth: 120,
        display: "flex",
        align: "right",
        headerAlign: "center",
        sortable: false,
        filterable: false,
        disableColumnMenu: true,
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.code} />
              <ShowButton hideText recordItemId={row.code} />
              <DeleteButton
                hideText
                confirmTitle="Вы уверены?"
                recordItemId={row.code}
              />
            </>
          );
        },
      },
    ],
    []
  );

  return (
    <List>
      <CustomDataGrid
        {...dataGridProps}
        languageEnabled
        columns={columns}
        getRowId={(row: any) => row.code}
      />
    </List>
  );
});