import { Box, Flex } from 'UIKit/grid';
import elementsRender from '../../config/elements-render';
import { elements, id, title } from './config';
import PaymentsTable from './PaymentsTable';

function Payments() {
  const renderedElements = elements.map((elementName) => {
    const render = elementsRender[elementName]?.render;

    return render();
  });

  // eslint-disable-next-line operator-linebreak
  const [radioGraphType, selectSeasonType, tbxParmentsDecreasePercent, selectHighSeasonStart] =
    renderedElements;

  return (
    <Flex flexDirection="column">
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: ['1fr', '1fr', '1fr 4fr'],
          gap: '10px',
        }}
      >
        {radioGraphType}
        <Flex flexDirection="column">
          {selectSeasonType}
          {tbxParmentsDecreasePercent}
          {selectHighSeasonStart}
        </Flex>
      </Box>
      <PaymentsTable />
    </Flex>
  );
}

export default {
  id,
  title,
  Component: Payments,
};