import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import { Download, Delete, Settings } from "@mui/icons-material";
import {UseMonDownloadFile, useMonfiledownload} from "../../hooks/data/usemfdownload"

import {
  DateField,
  DeleteButton,
  EditButton,
  List,
  MarkdownField,
  NumberField,
  ShowButton,
  useDataGrid,
} from "@refinedev/mui";

import React, { Dispatch, SetStateAction } from "react";
import { IMonitoring, IMonitoringFile } from "./monitorings.types";
import { useApiUrl, useCustom, useList, useUpdate } from "@refinedev/core";
import Button from "@mui/material/Button/Button";
import Stack from "@mui/material/Stack/Stack";
import MFDownlaodDialig from "../../components/download/mfdownlaodDialog";
import { IMonFilter } from "./filter/monfilter";

export interface MonDatafileTableProps {
  //monfilters: IMonFilter[],
  monfilterId: string,
  setDF: Dispatch<SetStateAction<GridRowSelectionModel>>  
};




// export const MonDatafileTable = ({monfilters, setDF}: MonDatafileTableProps) => {
export const MonDatafileTable = ({monfilterId, setDF}: MonDatafileTableProps) => {

  const [selectedRowKeys, setSelectedRowKeys] = React.useState<GridRowSelectionModel>([]);
  const hasSelected = selectedRowKeys.length > 0;


  const dataProvider =  "monitoringfiles";

  const { dataGridProps } = useDataGrid<IMonitoringFile>({
    syncWithLocation: true,
    dataProviderName: dataProvider,
    pagination: {
      mode: "client",
      pageSize: 10,
    },
    filters: {
      initial: [
        {
          field: "monId",
          operator: "eq",
          value: monfilterId,
        },
      ],
    },
  });


  const [open, setOpen] = React.useState(false);
  


  const handleSelection = (value: GridRowSelectionModel) => {
    setSelectedRowKeys(value);
    setDF(value);
  }

  // const onClose = (value: boolean) => {
  //   setOpen(false);
  // };

  // const downloadSelectedItems = () => {
  //   setOpen(true);
  // }


  // const deleteSelectedItems = () => {}


  // const setItems = () => {

  // }


  const columns = React.useMemo<GridColDef<IMonitoringFile>[]>(
    () => [
      {
        field: "name",
        flex: 1,
        headerName: "Name",
        type:"string",
        minWidth: 250,
      },
      {
        field: "timestamp",
        flex: 1,
        headerName: "Timestamp",
        minWidth: 30,
        renderCell: function render({ value }) {
          let d = new Date();
          const unixtime = new Date(value);
          //return <DateField value={unixtime} />;          
          return <DateField value={unixtime} format={'DD-MM-YYYY hh:mm:ss A'}/>;
        },
      },
      {
        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: "actions",
        headerName: "Actions",
        sortable: false,
        renderCell: function render({ row }) {
          return (
            <>
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
    ],
    []
  );



  
  return (
    <DataGrid 
      {...dataGridProps}
      columns={columns} 
      autoHeight  
      checkboxSelection 
      onRowSelectionModelChange={(newSelectionModel) => {
        handleSelection(newSelectionModel);
      }}
      rowSelectionModel={selectedRowKeys}
    />
  );
};


/*
import { useState, createContext, Dispatch, SetStateAction} from 'react';

interface AppContextInterface {
  mode: PaletteMode;
  setMode: Dispatch<SetStateAction<PaletteMode>>
}

function App() {
  const ColorModeContext = createContext<AppContextInterface>({
      mode: 'dark', // set a default value
      setMode: () => {},
  })

  const [mode, setMode] = useState<PaletteMode>('dark');
  */