Notes

import React from 'react';
import clsx from 'clsx';
import { Typography, Button, Fab } from '@material-ui/core';
import SvgBackArrow from 'icons/ChevronLeft';
import Stepper from '@highradius/g4_ui_components/lib/components/atoms/Stepper';
import { FormattedMessage } from 'react-intl';
import FlexBox from 'components/FlexBox';
import useDynamicStepperLayoutStyle from './styles';
import messages from './messages';

const configParser = (newConfig: any) => {
const config = newConfig.filter((cnf) => !cnf.hidden);
const header: any = config?.map((item) => item.header);

const indicatorList: any = config?.map((item) => ({
label: item.label,
icon: item.icon,
}));
const content: any = config?.map((item) => item?.content?.map((i1) => i1));
const isDisabled: any = config?.map((item) => item.isDisabled);
return { header, indicatorList, content, isDisabled };
};

const DynamicStepperLayout = ({
isCreate = false,
config,
onSave,
onCancel,
onNext = () => {},
classes = { content: '', stepper: '' },
}: {
isCreate: boolean;
config: any;
onSave: any;
onCancel: any;
onNext?: any;
classes?: { content?: string; stepper?: string };
}) => {
const defaultClasses = useDynamicStepperLayoutStyle();

const { header, indicatorList, content, isDisabled } = React.useMemo(() => {
console.log('running');
return configParser(config);
}, [config]);

const [page, setPage] = React.useState(0);
const [innerContent, setInnerContent] = React.useState(0);

const lengthOfIndicatorList = React.useMemo(
() => indicatorList?.length - 1,
[indicatorList?.length],
);

const handleNextButton = () => {
onNext();
if (content[page].length > 1) {
if (content[page].length - 1 === innerContent) {
setPage(
page >= lengthOfIndicatorList ? lengthOfIndicatorList : page + 1,
);
setInnerContent(0);
} else {
setInnerContent(innerContent + 1);
}
} else {
setPage(page >= lengthOfIndicatorList ? lengthOfIndicatorList : page + 1);
setInnerContent(0);
}
};

const handlePreviousButton = () => {
setPage(page <= 0 ? 0 : page - 1);
setInnerContent(0);
};

const handleCancel = () => {
onCancel();
setPage(0);
};

const buttonText = (isLast) => {
if (isLast && isCreate)
return (
<Typography variant="body2">
<FormattedMessage {...messages.createText} />
</Typography>
);
if (isLast && !isCreate)
return (
<Typography variant="body2">
<FormattedMessage {...messages.saveText} />
</Typography>
);
return (
<Typography variant="body2">
<FormattedMessage {...messages.nextText} />
</Typography>
);
};

const getFooter = (isLast: any) => (
<FlexBox justifyContent="flex-end" className={defaultClasses.footer}>
<Button variant="outlined" onClick={handleCancel}>
<Typography variant="body2">
<FormattedMessage {...messages.cancelText} />
</Typography>
</Button>
<Button
variant="contained"
disabled={isDisabled[page]}
onClick={isLast ? onSave : handleNextButton}
>
{buttonText(isLast)}
</Button>
</FlexBox>
);

return (
<FlexBox
justifyContent="space-between"
direction="column"
overflow="hidden"
className={defaultClasses.root}
>
<div className={clsx(defaultClasses.stepper, classes.stepper)}>
<Stepper activeStep={page} stepperContent={indicatorList} />
</div>
<FlexBox
justifyContent="space-between"
direction="column"
overflow="hidden"
className={clsx(defaultClasses.content, classes.content)}
>
<FlexBox direction="column" overflow="hidden" fullWidth>
{header[page] && (
<FlexBox alignItems="center" className={defaultClasses.heading}>
<Fab
size="small"
onClick={page === 0 ? handleCancel : handlePreviousButton}
>
<SvgBackArrow />
</Fab>
<Typography variant="h2">{header[page]}</Typography>
</FlexBox>
)}
{content[page][innerContent]}
</FlexBox>
{getFooter(page === lengthOfIndicatorList)}
</FlexBox>
</FlexBox>
);
};

export default DynamicStepperLayout;