Untitled

/**
 * @license
 * Copyright (c) ECS FIN. All rights reserved.
 *
 * Unauthorized copying or reproduction of this file, in any form,
 * including file content and design, is strictly prohibited. This source code is
 * confidential and proprietary to ECS FIN.
 */

import { Col, DatePicker, Form, Input, Row, Select, Space } from "antd";
import styled from "@emotion/styled";
import dayjs from "dayjs";

import {
  chargeBearerCodes,
  purposeCodes,
  transactionTypeCodes,
} from "../config";
import { useEffect, useState } from "react";
import useRulesFetching from "../lib/use-fetch-rules";
// import useRulesFetching from "@/entities/initiation/index";

const { Item } = Form;

const BasicDetails = ({ isDetailed }) => {
  const required = [
    {
      required: true,
    },
  ];
  const [paymentNetwork, setPaymentNetwork] = useState(null);
  const [msgType, setMsgType] = useState(null);
  const [ruleSetDecider,setRuleSetDecider]=useState('default')
  const handlePaymentNetworkChange = (value) => {
    setPaymentNetwork(value);
  };
  const handleMsgTypeChange = (value) => {
    setMsgType(value);
  };
  
  useEffect(() => {
    if(paymentNetwork&&msgType){
      setRuleSetDecider(`${paymentNetwork}-${msgType}`)
    }
  }, [paymentNetwork,msgType]);

  const ruleSet = useRulesFetching(ruleSetDecider);

  const disabledDate = (current) => {
    // Can not select days before today and today
    return current && current <= dayjs().subtract(1, "day").endOf("day");
  };

  return (
    <Row gutter={[24, 8]}>
      <Col sm={24} lg={8}>
        <Item name={"paymentNetwork"} label="Payment network" rules={ruleSet?.network}>
          <Select
            options={[
              { value: "fedwire", label: "fedwire" },
              { value: "Fednow", label: "Fednow" },
            ]}
            onChange={handlePaymentNetworkChange}
          />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item name={"messageType"} label="Message type" rules={required}>
          <Select
            options={
              paymentNetwork == "fedwire"
                ? [
                    { value: "pacs008", label: "pacs008" },
                    { value: "pacs009", label: "pacs009" },
                  ]
                : [
                    { value: "pacs.001", label: "pacs.001" },
                    { value: "pacs.002", label: "pacs.002" },
                  ]
            }
            onChange={handleMsgTypeChange}
          />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item
          name={"interBankSettlementDate"}
          label="Interbank settlement date"
          rules={ruleSet?.creditorDTO?.name}
        >
          <_DatePicker disabledDate={disabledDate} />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item
          name={"instructedAgent"}
          label="Instructed agent"
          rules={required}
        >
          <Input />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item
          name={"instructingAgent"}
          label="Instructing agent"
          rules={required}
        >
          <Input />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item name={"endToEndId"} label="End to end id" rules={required}>
          <Input />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item name={"chargeBearer"} label="Charge bearer" rules={required}>
          <Select options={chargeBearerCodes} />
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item label={"Charge amount"}>
          <Space.Compact block>
            <_Item
              name={"chargeAmount"}
              width="100%"
              rules={[ruleSet?.chargeAmount]}
            >
              <Input
                addonAfter={
                  <Item name="chargeAmountCurrency" noStyle initialValue="USD">
                    <Select options={[{ value: "USD", label: "USD" }]} />
                  </Item>
                }
              />
            </_Item>
          </Space.Compact>
        </Item>
      </Col>
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"purposeCode"} label="Purpose code">
            <Select
              showSearch
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={purposeCodes}
            />
          </Item>
        </Col>
      )}
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"priority"} label="Priority">
            <Input />
          </Item>
        </Col>
      )}
      <Col sm={24} lg={8}>
        <Item
          label={
            <>
              <LabelPrefix />
              Instructed amount
            </>
          }
        >
          <Space.Compact block>
            <_Item
              name={"instructedAmount"}
              width="100%"
              rules={[
                {
                  required: true,
                  type: "number",
                  message: "Please enter Instructed amount(valid number)",
                  transform(value) {
                    return Number(value);
                  },
                },
              ]}
            >
              <Input
                addonAfter={
                  <Item
                    name="instructedAmountCurrency"
                    noStyle
                    initialValue="USD"
                  >
                    <Select options={[{ value: "USD", label: "USD" }]} />
                  </Item>
                }
              />
            </_Item>
          </Space.Compact>
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item
          label={
            <>
              <LabelPrefix />
              Interbank settlement amount
            </>
          }
        >
          <Space.Compact block>
            <_Item
              name={"interBankSettlementAmount"}
              width="100%"
              rules={[
                {
                  required: true,
                  type: "number",
                  message:
                    "Please enter Interbank settlement amount(valid number)",
                  transform(value) {
                    return Number(value);
                  },
                },
              ]}
            >
              <Input
                addonAfter={
                  <Item
                    name="interBankSettlementCurrency"
                    noStyle
                    initialValue="USD"
                  >
                    <Select options={[{ value: "USD", label: "USD" }]} />
                  </Item>
                }
              />
            </_Item>
          </Space.Compact>
        </Item>
      </Col>
      <Col sm={24} lg={8}>
        <Item name={"exchangeRate"} label="Exchange rate">
          <Input />
        </Item>
      </Col>
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"departmentId"} label="Department id">
            <Input />
          </Item>
        </Col>
      )}
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"branchId"} label="Branch id">
            <Input />
          </Item>
        </Col>
      )}
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"segmentType"} label="Segment type">
            <Select
              options={[
                { value: "RETAIL", label: "RETAIL" },
                { value: "ORG", label: "ORG" },
              ]}
            />
          </Item>
        </Col>
      )}
      {isDetailed && (
        <Col sm={24} lg={8}>
          <Item name={"transactionTypeCode"} label="Transaction type code">
            <Select
              options={transactionTypeCodes}
              showSearch
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
            />
          </Item>
        </Col>
      )}
      <Col sm={24} lg={8}>
        <Item name={"remarks"} label="Remarks">
          <Input />
        </Item>
      </Col>
    </Row>
  );
};

export default BasicDetails;

const _DatePicker = styled(DatePicker)`
  width: 100%;
`;

const _Item = styled(Item)`
  width: ${(props) => props.width};
`;

const LabelPrefix = styled.div`
  color: red;
  padding: 0 4px 0 0;
  ::before {
    content: "*";
  }
`;