import React from 'react';
import BaseIcon from '../BaseIcon';
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';
type Params = (id: string) => void;

export const loadColumns = async (
    onDelete: Params,
    entityName: string,
) => {
    async function callOptionsApi(entityName: string) {
        try {
        const data = await axios(`/${entityName}/autocomplete?limit=100`);
        return data.data;
        } catch (error) {
         console.log(error);
         return [];
        }
    }
    return [

        {
            field: 'code',
            headerName: 'Code',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,

        },

        {
            field: 'principal_amount',
            headerName: 'PrincipalAmount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'term',
            headerName: 'Term',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'pending_amount',
            headerName: 'PendingAmount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'last_pending_amount',
            headerName: 'LastPendingAmount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'rate',
            headerName: 'Rate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'commission_rate',
            headerName: 'CommissionRate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'registration_date',
            headerName: 'RegistrationDate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                new Date(params.row.registration_date),

        },

        {
            field: 'started_payment_date',
            headerName: 'StartedPaymentDate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                new Date(params.row.started_payment_date),

        },

        {
            field: 'last_payment_date',
            headerName: 'LastPaymentDate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                new Date(params.row.last_payment_date),

        },

        {
            field: 'finish_payment_date',
            headerName: 'FinishPaymentDate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'dateTime',
            valueGetter: (params: GridValueGetterParams) =>
                new Date(params.row.finish_payment_date),

        },

        {
            field: 'finish_discount',
            headerName: 'FinishDiscount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'finish_discount_amount',
            headerName: 'FinishDiscountAmount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'admin_rate',
            headerName: 'AdminRate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'admin_amount',
            headerName: 'AdminAmount',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            type: 'number',

        },

        {
            field: 'purpose',
            headerName: 'Purpose',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,

        },

        {
            field: 'status',
            headerName: 'Status',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('loan_status'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'client',
            headerName: 'Client',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('clients'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'staff',
            headerName: 'Staff',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('staffs'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'interest_rate',
            headerName: 'InterestRate',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('interest_rates'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'branch',
            headerName: 'Branch',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('branches'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'loan_type',
            headerName: 'LoanType',
            flex: 1,
            minWidth: 120,
            filterable: false,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',

            editable: true,
            sortable: false,
            type: 'singleSelect',
            getOptionValue: (value: any) => value?.id,
            getOptionLabel: (value: any) => value?.label,
            valueOptions: await callOptionsApi('loan_types'),
            valueGetter: (params: GridValueGetterParams) =>
                params?.value?.id ?? params?.value,

        },

        {
            field: 'actions',
            type: 'actions',
            minWidth: 30,
            headerClassName: 'datagrid--header',
            cellClassName: 'datagrid--cell',
            getActions: (params: GridRowParams) => {

               return [
                   <div key={params?.row?.id}>
                      <ListActionsPopover
                      onDelete={onDelete}
                      itemId={params?.row?.id}
                      pathEdit={`/loans/loans-edit/?id=${params?.row?.id}`}
                      pathView={`/loans/loans-view/?id=${params?.row?.id}`}
                      hasUpdatePermission={true}
                    />
                   </div>,
                  ]
            },
        },
    ];
};
