import { Box , Button , CircularProgress , Paper , Typography , } from '@mui/material' ; import React , { PropsWithChildren , ReactElement } from 'react' ; import { SelectedItem , SelectedItemProps } from '../SelectedItem' ; import { useCertificateActionContentEffects } from './CertificateActionContent.effects' ; import { useStyles } from './CertificateActionContent.styles' ; export interface CertificateActionContentProps < Id > { title : string ; buttonText : string ; selectedIds : Id [ ] ; submitHandler : ( id : Id , amount : string ) => void | Promise < void > ; selectedItems : Omit < SelectedItemProps < Id > , 'amount' | 'onAmountChange' | 'editMode' | 'setEditMode' > [ ] ; buttonDisabled ? : boolean ; setTotalAmount ? : ( newValue : number ) => void ; disableBulkActions ? : boolean ; } export type TCertificateActionContent = < Id > ( props : PropsWithChildren < CertificateActionContentProps < Id > > ) => ReactElement ; export const CertificateActionContent = ( { title , buttonText , selectedIds , selectedItems , submitHandler , buttonDisabled , setTotalAmount , children , disableBulkActions = false , } ) => { const classes = useStyles ( ) ; const { selectCertificateText , totalVolumeText , getEnergyAmountForItem , handleItemEnergyAmountChange , handleSubmit , totalVolume , bulkActionsRestrictionsText , editMode , setEditMode , loading , loadingText , } = useCertificateActionContentEffects ( selectedIds , selectedItems , submitHandler , setTotalAmount ) ; return ( < Paper className = { classes . paper } > < Typography gutterBottom variant = "h6" > { title } < /Typography> { selectedIds . length > 0 ? ( selectedItems . map ( ( item ) => ( < SelectedItem editMode = { editMode } setEditMode = { setEditMode } amount = { getEnergyAmountForItem ( item . id ) } onAmountChange = { handleItemEnergyAmountChange } key = { `selected-item-${ item . id }` } { ... item } />))) : (<div className={classes.emptyTextWrapper}> < Typography color = "textSecondary" > { selectCertificateText } < /Typography> < /div>)} < div className = { classes . totalVolume } > < Typography color = "textSecondary" > { totalVolumeText } < /Typography> < Typography > { totalVolume } MWh < /Typography> < /div> { children } < Button fullWidth disabled = { selectedIds . length === 0 || ( disableBulkActions && selectedIds . length > 1 ) || buttonDisabled || editMode || loading } color = "primary" variant = "contained" onClick = { handleSubmit } > { ! loading ? ( `${ buttonText } ${ selectedIds . length } Certificate(s)` ) : ( < > { loadingText } < Box ml = { 2 } > < CircularProgress size = { 20 } /> < /Box> < />)} < /Button> { disableBulkActions && selectedIds . length > 1 && ( < Box mt = { 2 } > < Typography align = "center" color = "textSecondary" > { bulkActionsRestrictionsText } < /Typography> < /Box>)} < /Paper>); } ;