import { GridColDef } from "@mui/x-data-grid";
import DataGrid from "@kitUI/datagrid";
import { openPrivilegePriceModal, usePrivilegeStore } from "@stores/privileges";
import { IconButton } from "@mui/material";
import { MouseEventHandler } from "react";
import EditIcon from '@mui/icons-material/Edit';


const columns: GridColDef[] = [
    { field: 'id', headerName: 'id', width: 40 },
    { field: 'name', headerName: 'Привелегия', width: 150 },
    { field: 'description', headerName: 'Описание', width: 550 },//инфо из гитлаба.
    { field: 'type', headerName: 'Тип', width: 150 },
    { field: 'price', headerName: 'Стоимость', width: 50 },
    {
        field: "changeValue",
        headerName: "Изменить",
        sortable: false,
        renderCell: (params) => {
            const onClick: MouseEventHandler<HTMLButtonElement> = () => {
                openPrivilegePriceModal(params.row.id, params.row.price);
            };

            return (
                <IconButton onClick={onClick}>
                    <EditIcon />
                </IconButton>
            );
        },
    },
];

export default function Privileges() {
    const privileges = usePrivilegeStore(state => state.privileges);

    const privilegesGridData = privileges.map(privilege => ({
        id: privilege.privilegeId,
        name: privilege.name,
        description: privilege.description,
        type: privilege.type,
        price: privilege.pricePerUnit,
    }));

    return (
        <DataGrid
            // checkboxSelection={true}
            rows={privilegesGridData}
            columns={columns}
        />
    );
}