From 1585e63d916cb75df0c400e12210f5ee3cc7e559 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 1 Jun 2022 19:34:50 +0300
Subject: [PATCH] Calculation/Form: add Payments Component

---
 .../Calculation/Form/Payments/config.ts       | 10 +++++
 .../Calculation/Form/Payments/index.jsx       | 37 +++++++++++++++++++
 .../Calculation/config/elements-props.ts      |  5 +++
 Elements/Radio.tsx                            | 21 ++++++++---
 4 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 Components/Calculation/Form/Payments/config.ts
 create mode 100644 Components/Calculation/Form/Payments/index.jsx

diff --git a/Components/Calculation/Form/Payments/config.ts b/Components/Calculation/Form/Payments/config.ts
new file mode 100644
index 0000000..02871c1
--- /dev/null
+++ b/Components/Calculation/Form/Payments/config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+
+import type { SectionsConfig } from 'Components/Calculation/types/sections';
+
+export const elements: SectionsConfig[number][0] = [
+  'radioGraphType',
+  'selectSeasonType',
+  'tbxParmentsDecreasePercent',
+  'selectHighSeasonStart',
+];
diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx
new file mode 100644
index 0000000..72e1913
--- /dev/null
+++ b/Components/Calculation/Form/Payments/index.jsx
@@ -0,0 +1,37 @@
+/* eslint-disable operator-linebreak */
+import { Box, Flex } from 'UIKit/grid';
+import elementsRender from '../../config/elements-render';
+import { elements } from './config';
+
+function Payments() {
+  const renderedElements = elements.map((elementName) => {
+    const render = elementsRender[elementName]?.render;
+
+    return render();
+  });
+
+  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>
+      {/* TODO: add Payments Table */}
+    </Flex>
+  );
+}
+
+export default Payments;
diff --git a/Components/Calculation/config/elements-props.ts b/Components/Calculation/config/elements-props.ts
index 82f02f3..4d8f909 100644
--- a/Components/Calculation/config/elements-props.ts
+++ b/Components/Calculation/config/elements-props.ts
@@ -354,6 +354,11 @@ const props: Partial<ElementsProps> = {
     optionType: 'button',
     buttonStyle: 'solid',
   },
+  radioGraphType: {
+    spaceProps: {
+      direction: 'vertical',
+    },
+  },
 };
 
 const moneyResultElementsProps = Object.fromEntries(
diff --git a/Elements/Radio.tsx b/Elements/Radio.tsx
index feee975..66f15e1 100644
--- a/Elements/Radio.tsx
+++ b/Elements/Radio.tsx
@@ -1,11 +1,12 @@
-import type { RadioChangeEvent } from 'antd';
-import { Form, Radio as AntRadio } from 'antd';
+import type { RadioChangeEvent, RadioGroupProps, SpaceProps } from 'antd';
+import { Form, Radio as AntRadio, Space } from 'antd';
 import type { BaseElementProps, BaseOption } from './types';
 
 const { Item: FormItem } = Form;
 
 type ElementProps = BaseElementProps<string | null> & {
   options: BaseOption[];
+  spaceProps?: SpaceProps;
 };
 
 export default function Radio({
@@ -15,6 +16,7 @@ export default function Radio({
   status,
   isValid,
   help,
+  spaceProps,
   ...props
 }: ElementProps) {
   function handleChange(e: RadioChangeEvent) {
@@ -25,13 +27,22 @@ export default function Radio({
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <AntRadio.Group
         value={value}
-        options={options}
         onChange={handleChange}
         disabled={status === 'Disabled'}
         {...props}
-      />
+      >
+        <Space {...spaceProps}>
+          {options.map((option) => (
+            <AntRadio value={option.value}>{option.label}</AntRadio>
+          ))}
+        </Space>
+      </AntRadio.Group>
     </FormItem>
   );
 }
 
-export { type RadioGroupProps as RadioProps } from 'antd';
+type RadioProps = RadioGroupProps & {
+  spaceProps?: SpaceProps;
+};
+
+export type { RadioProps };