import React from 'react';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
    GridActionsCellItem,
    GridRowParams,
    GridValueGetterParams,
} from '@mui/x-data-grid';
import dataFormatter from '../../helpers/dataFormatter'
import DataGridMultiSelect from "../DataGridMultiSelect";
import ListActionsPopover from '../ListActionsPopover';
import {hasPermission} from "../../helpers/userPermissions";

type Params = (id: string) => void;

export const loadColumns = async (
    onDelete: Params,
    entityName: string,
    user
) => {
    const hasUpdatePermission = hasPermission(user, 'UPDATE_PROJECTS')
    
    return [
        {
            field: 'name',
            headerName: 'Name',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: hasUpdatePermission,
        },
        {
            field: 'status',
            headerName: 'Status',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: hasUpdatePermission,
            type: 'singleSelect',
            valueOptions: ['active', 'completed', 'archived'],
        },
        {
            field: 'startDate',
            headerName: 'Start Date',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: hasUpdatePermission,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                params.row.startDate ? new Date(params.row.startDate) : null,
        },
        {
            field: 'endDate',
            headerName: 'Finish Date',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: hasUpdatePermission,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                params.row.endDate ? new Date(params.row.endDate) : null,
        },
        {
            field: 'description',
            headerName: 'Description',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: hasUpdatePermission,
        },
        {
            field: 'trials',
            headerName: 'Associated Trials',
            flex: 1,
            minWidth: 150,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            editable: false,
            sortable: false,
            type: 'singleSelect',
            valueFormatter: ({ value }) =>
                 // Assuming trials is an array of objects with name or title
                 Array.isArray(value) ? value.map(t => t.name || t.id).join(', ') : '',
            // If we want editable trials in grid, we can enable it, but might be complex for M-to-M
            renderEditCell: (params) => (
                <DataGridMultiSelect {...params} entityName={'trials'}/>
            ),
        },
        {
            field: 'actions',
            type: 'actions',
            minWidth: 80,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            getActions: (params: GridRowParams) => {
               return [
                   <div key={params?.row?.id}>
                      <ListActionsPopover
                      onDelete={onDelete}
                      itemId={params?.row?.id}
                      pathEdit={`/projects/${params?.row?.id}`}
                      pathView={`/projects/${params?.row?.id}`} // View can be same as Edit for now or we create a separate view
                      hasUpdatePermission={hasUpdatePermission}
                    />
                   </div>,
                  ]
            },
        },
    ];
};