import React from 'react'
import axios from 'axios'
import { GridColDef, GridRowParams, GridValueGetterParams } from '@mui/x-data-grid'
import ListActionsPopover from '../ListActionsPopover'
import { hasPermission } from '../../helpers/userPermissions'

type Params = (id: string) => void

export const loadColumns = async (
  onDelete: Params,
  entityName: string,
  user,
): Promise<GridColDef[]> => {
  async function callOptionsApi(entityName: string) {
    if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) {
      return []
    }

    const { data } = await axios(`/${entityName}/autocomplete?limit=100`)
    return data
  }

  const hasUpdatePermission = hasPermission(user, 'UPDATE_PRICE_LISTS')

  return [
    {
      field: 'price_list_name',
      headerName: 'Price list',
      flex: 1.4,
      minWidth: 220,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
    },
    {
      field: 'price_list_type',
      headerName: 'Type',
      flex: 0.8,
      minWidth: 140,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
    },
    {
      field: 'effective_start',
      headerName: 'Effective start',
      flex: 1,
      minWidth: 180,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
      type: 'dateTime',
      valueGetter: (params: GridValueGetterParams) => new Date(params.row.effective_start),
    },
    {
      field: 'effective_end',
      headerName: 'Effective end',
      flex: 1,
      minWidth: 180,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
      type: 'dateTime',
      valueGetter: (params: GridValueGetterParams) => new Date(params.row.effective_end),
    },
    {
      field: 'is_active',
      headerName: 'Active',
      flex: 0.7,
      minWidth: 110,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
      type: 'boolean',
    },
    {
      field: 'notes',
      headerName: 'Internal notes',
      flex: 1.4,
      minWidth: 240,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: hasUpdatePermission,
    },
    {
      field: 'actions',
      type: 'actions',
      minWidth: 56,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      getActions: (params: GridRowParams) => {
        return [
          <div key={params?.row?.id}>
            <ListActionsPopover
              onDelete={onDelete}
              itemId={params?.row?.id}
              pathEdit={`/price_lists/price_lists-edit/?id=${params?.row?.id}`}
              pathView={`/price_lists/price_lists-view/?id=${params?.row?.id}`}
              hasUpdatePermission={hasUpdatePermission}
            />
          </div>,
        ]
      },
    },
  ]
}
