import { DataGrid, GridColDef } from "@mui/x-data-grid";
import {
  DateField,
  DeleteButton,
  EditButton,
  List,
  MarkdownField,
  NumberField,
  ShowButton,
  useDataGrid,
} from "@refinedev/mui";
import React from "react";
import { IMonitoring } from "./monitorings.types";
import { MonitoringStatus } from "./status/monitoringstatus";
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
import { useUpdate } from "@refinedev/core";


export const MonitoringList = () => {
  const dataProvider =  "monitorings";
  const { dataGridProps } = useDataGrid<IMonitoring>({
    syncWithLocation: true,
    dataProviderName: dataProvider,
    pagination: {
      mode: "client",
      pageSize: 10,
    }, 
  });

  // const { data: categoryData, isLoading: categoryIsLoading } = useMany({
  //   resource: "categories",
  //   ids:
  //     dataGridProps?.rows
  //       ?.map((item: any) => item?.category?.id)
  //       .filter(Boolean) ?? [],
  //   queryOptions: {
  //     enabled: !!dataGridProps?.rows,
  //   },
  // });

  const { mutate } = useUpdate();
  

  const columns = React.useMemo<GridColDef<IMonitoring>[]>(
    () => [
      {
        field: "name",
        flex: 1,
        headerName: "Name",
        type:"string",
        minWidth: 250,
      },
      {
        field: "created_at",
        flex: 1,
        headerName: "Created at",
        minWidth: 30,
        renderCell: function render({ value }) {
          return <DateField value={value} />;
        },
      },
      {
        field: "samplerate",
        flex: 0.3,
        headerName: "Samplerate/Hz",
        renderCell: function render({ row }) {
          return (
            <NumberField
              value={row.samplerate}
              options={{
                minimumIntegerDigits: 1,
                minimumFractionDigits:0,
                maximumFractionDigits: 0,
              }}
            />
          );
        },
        minWidth: 120,
      },
      {
        field: "sampleperiod",
        flex: 0.3,
        headerName: "Period/s",
        renderCell: function render({ row }) {
          return (
            <NumberField
              value={row.sampleperiod}
              options={{
                minimumIntegerDigits: 1,
                minimumFractionDigits:1,
                maximumFractionDigits: 3,
              }}
            />
          );
        },
        minWidth: 120,
      },
      {
        field: "downtime",
        flex: 0.3,
        headerName: "Downtime/s",
        renderCell: function render({ row }) {
          return (
            <NumberField
              value={row.downtime}
              options={{
                minimumIntegerDigits: 1,
                minimumFractionDigits:1,
                maximumFractionDigits: 3,
              }}
            />
          );
        },
        minWidth: 120,
      },
      {
        field: "owner",
        flex: 1,
        headerName: "Owner",
        type:"string",
        minWidth: 80,
      },
      {
        field: "status",
        headerName: "Status",
        width: 124,
        editable: true,
        renderCell: function render({ row }) {
          return <MonitoringStatus key="MonStatus1" objId={row.id} status={row.status}
                onChange={ (value) => {
                    mutate({
                      resource: dataProvider,
                      id: row.id,
                      values: {
                        status: value,
                      },
                    });            
                }}
           />;
        },
      },
      {
        field: "actions",
        headerName: "Actions",
        sortable: false,
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
    ],
    []
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};



// {
//   field: "monstate",
//   headerName: t("orders.fields.status"),
//   width: 124,
//   renderCell: function render({ row }) {
//     return <MonitoringStatus status={row.monstate} />;
//   },
// },


// renderEditCell: function render({ row }) {
//   return <MonitoringStatusEditChip value={row.status} />;
// },