import { PropsWithChildren, ReactElement } from 'react';
import Grid2, { type GridSize } from '@mui/material/Grid2';
import makeStyles from '@mui/styles/makeStyles';

import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
  // If any, enter additional props that only exist on this component
  templateCol?: string;
}

const useStyles = makeStyles(() => ({
  colStyles: {
    display: 'grid',
    gap: '1rem',
    alignContent: 'baseline'
  }
}));

// Duplicated runtime code from React SDK

// props passed in combination of props from property panel (config.json) and run time props from Constellation
export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMPONENT_CLASS_NAME}}Props>) {
  const classes = useStyles();

  const { children, templateCol = '1fr 1fr' } = props;
  const childrenToRender = children as ReactElement[];

  if (childrenToRender.length !== 2) {
    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
  }

  // Calculate the size
  //  Default to assume the 2 columns are evenly split. However, override if templateCol
  //  (example value: "1fr 1fr")
  let aSize: GridSize = 6;
  let bSize: GridSize = 6;

  const colAArray = templateCol
    .replaceAll(/[a-z]+/g, '')
    .split(/\s/)
    .map(itm => Number(itm));
  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
  const ratio = 12 / totalCols;
  aSize = (ratio * colAArray[0]) as GridSize;
  bSize = (ratio * colAArray[1]) as GridSize;

  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      {{! pick new delimiters for mustache }}
      {{=<% %>=}}
      <Grid2 container spacing={1}>
        <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
          {childrenToRender[0]}
        </Grid2>
        <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
          {childrenToRender[1]}
        </Grid2>
      </Grid2>
      <%={{ }}=%>     {{! revert delimiters for mustache }}
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );
}