import { createStyles, makeStyles, Theme } from '@material-ui/core' import Button from '@material-ui/core/Button' import Dialog from '@material-ui/core/Dialog' import DialogContent from '@material-ui/core/DialogContent' import DialogTitle from '@material-ui/core/DialogTitle' import { Check, Clear } from '@material-ui/icons' import React, { ReactElement, useState } from 'react' import ExpandableListItemActions from '../../components/ExpandableListItemActions' import { SwarmSelect } from '../../components/SwarmSelect' import { EnrichedPostageBatch } from '../../providers/Stamps' interface Props { stamps: EnrichedPostageBatch[] onSelect: (stamp: EnrichedPostageBatch) => void onClose: () => void } const useStyles = makeStyles((theme: Theme) => createStyles({ dialog: { background: theme.palette.background.default, borderRadius: 0, width: '100%', maxWidth: '890px', }, title: { color: '#606060', textAlign: 'center', }, hint: { marginBottom: '16px', }, }), ) export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement { const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null) const classes = useStyles() function onChange(stampId: string) { const stamp = stamps.find(x => x.batchID === stampId) if (stamp) { setSelectedStamp(stamp) } } function onFinish() { if (selectedStamp) { onSelect(selectedStamp) onClose() } } return ( <Dialog open={true} onClose={onClose} aria-labelledby="form-dialog-title" fullWidth PaperProps={{ className: classes.dialog }} > <DialogTitle id="form-dialog-title" className={classes.title}> Select postage stamp </DialogTitle> <DialogContent> <SwarmSelect options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))} onChange={event => onChange(event.target.value as string)} /> </DialogContent> <DialogContent> <ExpandableListItemActions> <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}> Select </Button> <Button onClick={onClose} variant="contained" startIcon={<Clear />}> Cancel </Button> </ExpandableListItemActions> </DialogContent> </Dialog> ) }