import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import { Flex } from 'UIKit/grid';
import elementsRender from '../../config/elements-render';
import { elements } from './config';

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

    return render();
  });

  const [selectSeasonType, tbxParmentsDecreasePercent, selectHighSeasonStart] = renderedElements;

  const { $calculation } = useStore();
  const graphType = $calculation.getElementValue('radioGraphType');

  switch (graphType) {
    case 100_000_000:
      return null;
    case 100_000_001: {
      return <Flex flexDirection="column">{selectSeasonType}</Flex>;
    }
    case 100_000_002: {
      return <Flex flexDirection="column">{tbxParmentsDecreasePercent}</Flex>;
    }
    case 100_000_003: {
      return (
        <Flex flexDirection="column">
          {selectSeasonType}
          {selectHighSeasonStart}
        </Flex>
      );
    }
    case 100_000_004: {
      return null;
    }

    default:
      break;
  }
}

export default observer(PaymentsParams);