unleash.unleash/frontend/src/component/common/FormTemplate/FormTemplate.tsx

import MenuBookIcon from '@mui/icons-material/MenuBook';
import Codebox from '../Codebox/Codebox';
import {
    Collapse,
    IconButton,
    useMediaQuery,
    Tooltip,
    Divider,
    styled,
} from '@mui/material';
import { FileCopy, Info } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import Loader from '../Loader/Loader';
import copy from 'copy-to-clipboard';
import useToast from 'hooks/useToast';
import React, { ReactNode, useState } from 'react';
import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg';
import { formTemplateSidebarWidth } from './FormTemplate.styles';
import { relative } from 'themes/themeStyles';

interface ICreateProps {
    title?: ReactNode;
    description: string;
    documentationLink: string;
    documentationLinkLabel: string;
    loading?: boolean;
    modal?: boolean;
    disablePadding?: boolean;
    compactPadding?: boolean;
    showDescription?: boolean;
    showLink?: boolean;
    formatApiCode?: () => string;
    footer?: ReactNode;
    compact?: boolean;
}

const StyledContainer = styled('section', {
    shouldForwardProp: (prop) =>
        !['modal', 'compact'].includes(prop.toString()),
})<{ modal?: boolean; compact?: boolean }>(({ theme, modal, compact }) => ({
    minHeight: modal ? '100vh' : compact ? 0 : '80vh',
    borderRadius: modal ? 0 : theme.spacing(2),
    width: '100%',
    display: 'flex',
    margin: '0 auto',
    overflow: modal ? 'unset' : 'hidden',
    [theme.breakpoints.down(1100)]: {
        flexDirection: 'column',
        minHeight: 0,
    },
}));

const StyledRelativeDiv = styled('div')(({ theme }) => relative);

const StyledMain = styled('div')(({ theme }) => ({
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    flexShrink: 1,
    width: '100%',
    [theme.breakpoints.down(1100)]: {
        width: '100%',
    },
}));

const StyledFormContent = styled('div', {
    shouldForwardProp: (prop) => {
        return !['disablePadding', 'compactPadding'].includes(prop.toString());
    },
})<{ disablePadding?: boolean; compactPadding?: boolean }>(
    ({ theme, disablePadding, compactPadding }) => ({
        backgroundColor: theme.palette.background.paper,
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        padding: disablePadding
            ? 0
            : compactPadding
              ? theme.spacing(4)
              : theme.spacing(6),
        [theme.breakpoints.down('lg')]: {
            padding: disablePadding ? 0 : theme.spacing(4),
        },
        [theme.breakpoints.down(1100)]: {
            width: '100%',
        },
        [theme.breakpoints.down(500)]: {
            padding: disablePadding ? 0 : theme.spacing(4, 2),
        },
    }),
);

const StyledFooter = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(4, 6),
    [theme.breakpoints.down('lg')]: {
        padding: theme.spacing(4),
    },
    [theme.breakpoints.down(500)]: {
        padding: theme.spacing(4, 2),
    },
}));

const StyledTitle = styled('h1')(({ theme }) => ({
    marginBottom: theme.fontSizes.mainHeader,
    fontWeight: 'normal',
}));

const StyledSidebarDivider = styled(Divider)(({ theme }) => ({
    opacity: 0.3,
    marginBottom: theme.spacing(0.5),
}));

const StyledSubtitle = styled('h2')(({ theme }) => ({
    color: theme.palette.common.white,
    marginBottom: theme.spacing(2),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    fontWeight: theme.fontWeight.bold,
    fontSize: theme.fontSizes.bodySize,
}));

const StyledIcon = styled(FileCopy)(({ theme }) => ({
    fill: theme.palette.primary.contrastText,
}));

const StyledMobileGuidanceContainer = styled('div')(() => ({
    zIndex: 1,
    position: 'absolute',
    right: -3,
    top: -3,
}));

const StyledMobileGuidanceBackground = styled(MobileGuidanceBG)(() => ({
    width: '75px',
    height: '75px',
}));

const StyledMobileGuidanceButton = styled(IconButton)(() => ({
    position: 'absolute',
    zIndex: 400,
    right: 0,
}));

const StyledInfoIcon = styled(Info)(({ theme }) => ({
    fill: theme.palette.primary.contrastText,
}));

const StyledSidebar = styled('aside')(({ theme }) => ({
    backgroundColor: theme.palette.background.sidebar,
    padding: theme.spacing(4),
    flexGrow: 0,
    flexShrink: 0,
    width: formTemplateSidebarWidth,
    [theme.breakpoints.down(1100)]: {
        width: '100%',
        color: 'red',
    },
    [theme.breakpoints.down(500)]: {
        padding: theme.spacing(4, 2),
    },
}));

const StyledDescription = styled('p')(({ theme }) => ({
    color: theme.palette.common.white,
    zIndex: 1,
    position: 'relative',
}));

const StyledLinkContainer = styled('div')(({ theme }) => ({
    margin: theme.spacing(3, 0),
    display: 'flex',
    alignItems: 'center',
}));

const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
    marginRight: theme.spacing(1),
    color: theme.palette.primary.contrastText,
}));

const StyledDocumentationLink = styled('a')(({ theme }) => ({
    color: theme.palette.primary.contrastText,
    display: 'block',
    '&:hover': {
        textDecoration: 'none',
    },
}));

const FormTemplate: React.FC<ICreateProps> = ({
    title,
    description,
    children,
    documentationLink,
    documentationLinkLabel,
    loading,
    modal,
    formatApiCode,
    disablePadding,
    compactPadding = false,
    showDescription = true,
    showLink = true,
    footer,
    compact,
}) => {
    const { setToastData } = useToast();
    const smallScreen = useMediaQuery(`(max-width:${1099}px)`);
    const copyCommand = () => {
        if (formatApiCode !== undefined) {
            if (copy(formatApiCode())) {
                setToastData({
                    title: 'Successfully copied the command',
                    text: 'The command should now be automatically copied to your clipboard',
                    autoHideDuration: 6000,
                    type: 'success',
                    show: true,
                });
            } else {
                setToastData({
                    title: 'Could not copy the command',
                    text: 'Sorry, but we could not copy the command.',
                    autoHideDuration: 6000,
                    type: 'error',
                    show: true,
                });
            }
        }
    };

    const renderApiInfo = (apiDisabled: boolean, dividerDisabled = false) => {
        if (!apiDisabled) {
            return (
                <>
                    <ConditionallyRender
                        condition={!dividerDisabled}
                        show={<StyledSidebarDivider />}
                    />
                    <StyledSubtitle>
                        API Command{' '}
                        <Tooltip title='Copy command' arrow>
                            <IconButton onClick={copyCommand} size='large'>
                                <StyledIcon />
                            </IconButton>
                        </Tooltip>
                    </StyledSubtitle>
                    <Codebox text={formatApiCode!()} />{' '}
                </>
            );
        }
    };

    return (
        <StyledContainer modal={modal} compact={compact}>
            <ConditionallyRender
                condition={smallScreen}
                show={
                    <StyledRelativeDiv>
                        <MobileGuidance
                            description={description}
                            documentationLink={documentationLink}
                            documentationLinkLabel={documentationLinkLabel}
                        />
                    </StyledRelativeDiv>
                }
            />
            <StyledMain>
                <StyledFormContent
                    disablePadding={disablePadding}
                    compactPadding={compactPadding}
                >
                    <ConditionallyRender
                        condition={loading || false}
                        show={<Loader />}
                        elseShow={
                            <>
                                <ConditionallyRender
                                    condition={title !== undefined}
                                    show={<StyledTitle>{title}</StyledTitle>}
                                />
                                {children}
                            </>
                        }
                    />
                </StyledFormContent>
                <ConditionallyRender
                    condition={footer !== undefined}
                    show={() => (
                        <>
                            <Divider />
                            <StyledFooter>{footer}</StyledFooter>
                        </>
                    )}
                />
            </StyledMain>
            <ConditionallyRender
                condition={!smallScreen}
                show={
                    <Guidance
                        description={description}
                        documentationLink={documentationLink}
                        documentationLinkLabel={documentationLinkLabel}
                        showDescription={showDescription}
                        showLink={showLink}
                    >
                        {renderApiInfo(
                            formatApiCode === undefined,
                            !(showDescription || showLink),
                        )}
                    </Guidance>
                }
            />
        </StyledContainer>
    );
};

interface IMobileGuidance {
    description: string;
    documentationLink: string;
    documentationLinkLabel?: string;
}

const MobileGuidance = ({
    description,
    documentationLink,
    documentationLinkLabel,
}: IMobileGuidance) => {
    const [open, setOpen] = useState(false);

    return (
        <>
            <StyledMobileGuidanceContainer>
                <StyledMobileGuidanceBackground />
            </StyledMobileGuidanceContainer>
            <Tooltip title='Toggle help' arrow>
                <StyledMobileGuidanceButton
                    onClick={() => setOpen((prev) => !prev)}
                    size='large'
                >
                    <StyledInfoIcon />
                </StyledMobileGuidanceButton>
            </Tooltip>
            <Collapse in={open} timeout={500}>
                <Guidance
                    description={description}
                    documentationLink={documentationLink}
                    documentationLinkLabel={documentationLinkLabel}
                />
            </Collapse>
        </>
    );
};

interface IGuidanceProps {
    description: string;
    documentationLink: string;
    documentationLinkLabel?: string;
    showDescription?: boolean;
    showLink?: boolean;
}

const Guidance: React.FC<IGuidanceProps> = ({
    description,
    children,
    documentationLink,
    documentationLinkLabel = 'Learn more',
    showDescription = true,
    showLink = true,
}) => {
    return (
        <StyledSidebar>
            <ConditionallyRender
                condition={showDescription}
                show={<StyledDescription>{description}</StyledDescription>}
            />

            <ConditionallyRender
                condition={showLink}
                show={
                    <StyledLinkContainer>
                        <StyledLinkIcon />
                        <StyledDocumentationLink
                            href={documentationLink}
                            rel='noopener noreferrer'
                            target='_blank'
                        >
                            {documentationLinkLabel}
                        </StyledDocumentationLink>
                    </StyledLinkContainer>
                }
            />

            {children}
        </StyledSidebar>
    );
};

export default FormTemplate;