import type { BoxProps } from 'UIKit/grid';
import { Box } from 'UIKit/grid';
import elementsRender from '../config/elements-render';
import type { Elements as ActionElements } from '../config/map/actions';
import type { Elements as ComputedElements } from '../config/map/computed';
import type { Elements as ValuesElements } from '../config/map/values';

export type FormComponentConfig = {
  id: string;
  title: string;
  rows: Array<
    [elements: (ValuesElements | ComputedElements | ActionElements)[], style?: BoxProps['style']]
  >;
};

function renderFormComponent(config: FormComponentConfig) {
  const rows = config.rows.map(([elements, style], i) => {
    const renderedElements = elements.map((elementName) => {
      const render = elementsRender[elementName]?.render;

      return render();
    });

    return (
      <Box
        // eslint-disable-next-line react/no-array-index-key
        key={i.toString()}
        sx={{
          display: 'grid',
          gridTemplateColumns: ['1fr', '1fr', 'repeat(3, 1fr)'],
          gap: '10px',
          ...style,
        }}
      >
        {renderedElements}
      </Box>
    );
  });

  return (
    <Box
      sx={{
        display: 'grid',
        gridAutoRows: 'auto',
      }}
    >
      {rows}
    </Box>
  );
}

export default renderFormComponent;