WhiteNightsAdminPanel/src/pages/Article/ArticleListPage/index.tsx

import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import { ruRU } from "@mui/x-data-grid/locales";
import { authStore, articlesStore, languageStore, SearchInput, selectedCityStore } from "@shared";
import { useEffect, useState, useMemo } from "react";
import { observer } from "mobx-react-lite";
import { Trash2, Eye, Minus } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { DeleteModal, LanguageSwitcher } from "@widgets";
import { Box, CircularProgress } from "@mui/material";

export const ArticleListPage = observer(() => {
  const { articleList, getArticleList, deleteArticles } = articlesStore;
  const navigate = useNavigate();
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
  const [rowId, setRowId] = useState<string | null>(null);
  const { language } = languageStore;
  const [ids, setIds] = useState<number[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 50,
  });
  const canWriteArticles = authStore.canWrite("sights");
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    const fetchArticles = async () => {
      setIsLoading(true);
      await getArticleList();
      setIsLoading(false);
    };
    fetchArticles();
  }, [language, selectedCityStore.cityVersion]);

  const columns: GridColDef[] = [
    {
      field: "heading",
      headerName: "Название",
      flex: 1,
      renderCell: (params: GridRenderCellParams) => {
        return params.value ? (
          params.value
        ) : (
          <div className="flex h-full gap-7 items-center">
            <Minus size={20} className="text-red-500" />
          </div>
        );
      },
    },

    {
      field: "actions",
      headerName: "Действия",
      sortable: false,
      renderCell: (params: GridRenderCellParams) => (
        <div className="flex h-full gap-7 justify-center items-center">
          <button title="Просмотр" onClick={() => navigate(`/article/${params.row.id}`)}>
            <Eye size={20} className="text-green-500" />
          </button>
          {canWriteArticles && (
            <button
              title="Удалить"
              onClick={() => {
                setIsDeleteModalOpen(true);
                setRowId(params.row.id);
              }}
            >
              <Trash2 size={20} className="text-red-500" />
            </button>
          )}
        </div>
      ),
    },
  ];

  const rows = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    const cityId = selectedCityStore.selectedCityId;
    return articleList[language].data
      .filter((article) => !query || (article.heading ?? "").toLowerCase().includes(query))
      .filter((article) => !cityId || article.city_id === cityId)
      .map((article) => ({
        id: article.id,
        heading: article.heading,
        body: article.body,
      }));
  }, [articleList[language].data, searchQuery, selectedCityStore.selectedCityId]);

  return (
    <>
      <LanguageSwitcher />

      <div className="w-full">
        <div className="flex justify-between items-center mb-10">
          <h1 className="text-2xl">Статьи</h1>
        </div>

        {canWriteArticles && ids.length > 0 && (
          <div className="flex justify-end mb-5 duration-300">
            <button
              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
              onClick={() => setIsBulkDeleteModalOpen(true)}
            >
              <Trash2 size={20} className="text-white" /> Удалить выбранные (
              {ids.length})
            </button>
          </div>
        )}

        {(rows.length > 0 || searchQuery) && (
          <SearchInput value={searchQuery} onChange={setSearchQuery} />
        )}

        <div className="w-full">
          <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection={canWriteArticles}
            disableRowSelectionExcludeModel
            disableRowSelectionOnClick
            loading={isLoading}
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            pageSizeOptions={[50]}
            localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
            onRowSelectionModelChange={
              canWriteArticles
                ? (newSelection: any) => {
                    if (Array.isArray(newSelection)) {
                      const selectedIds = newSelection.map(
                        (id: string | number) => Number(id)
                      );
                      setIds(selectedIds);
                    } else if (
                      newSelection &&
                      typeof newSelection === "object" &&
                      "ids" in newSelection
                    ) {
                      const idsSet = newSelection.ids as Set<string | number>;
                      const selectedIds = Array.from(idsSet).map(
                        (id: string | number) => Number(id)
                      );
                      setIds(selectedIds);
                    } else {
                      setIds([]);
                    }
                  }
                : undefined
            }
            slots={{
              noRowsOverlay: () => (
                <Box
                  sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}
                >
                  {isLoading ? <CircularProgress size={20} /> : "Нет статей"}
                </Box>
              ),
            }}
          />
        </div>
      </div>

      <DeleteModal
        open={isDeleteModalOpen}
        onDelete={async () => {
          if (rowId) {
            await deleteArticles([parseInt(rowId)]);
            getArticleList();
          }
          setIsDeleteModalOpen(false);
          setRowId(null);
        }}
        onCancel={() => {
          setIsDeleteModalOpen(false);
          setRowId(null);
        }}
      />

      <DeleteModal
        open={isBulkDeleteModalOpen}
        onDelete={async () => {
          await deleteArticles(ids);
          getArticleList();
          setIsBulkDeleteModalOpen(false);
          setIds([]);
        }}
        onCancel={() => {
          setIsBulkDeleteModalOpen(false);
        }}
      />
    </>
  );
});