import * as React from "react";
import { GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
import DataGrid from "@kitUI/datagrid";
import { useTariffStore } from "@root/stores/tariffs";
import { SERVICE_LIST } from "@root/model/tariff";


const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID', width: 100 },
    { field: 'name', headerName: 'Название тарифа', width: 150 },
    { field: 'serviceName', headerName: 'Сервис', width: 150 },//инфо из гитлаба.
    { field: 'privilege', headerName: 'Привелегия', width: 150 },
    { field: 'amount', headerName: 'Количество', width: 110 },
    { field: 'type', headerName: 'Единица', width: 100 },
    { field: 'pricePerUnit', headerName: 'Цена за ед.', width: 100 },
    { field: 'isCustomPrice', headerName: 'Кастомная цена', width: 130 },
    { field: 'total', headerName: 'Сумма', width: 130 },
];

interface Props {
    handleSelectionChange: (selectionModel: GridSelectionModel) => void;
}

export default function TariffsDG({ handleSelectionChange }: Props) {
    const tariffs = useTariffStore(state => state.tariffs);

    const gridData = tariffs.map(tariff => ({
        id: tariff.id,
        name: tariff.name,
        serviceName: SERVICE_LIST.find(service => service.serviceKey === tariff.privilege.serviceKey)?.displayName,
        privilege: `(${tariff.privilege.privilegeId}) ${tariff.privilege.description}`,
        amount: tariff.amount,
        type: tariff.privilege.type === "count" ? "день" : "шт.",
        pricePerUnit: tariff.customPricePerUnit ?? tariff.privilege.pricePerUnit,
        isCustomPrice: tariff.customPricePerUnit === undefined ? "Нет" : "Да",
        total: tariff.amount * (tariff.customPricePerUnit ?? tariff.privilege.pricePerUnit),
    }));

    return (
        <DataGrid
            checkboxSelection={true}
            rows={gridData}
            columns={columns}
            components={{ Toolbar: GridToolbar }}
            onSelectionModelChange={handleSelectionChange}
        />
    );
}