GHHub/src/views/products/Detail/NewProductModal.jsx

import { useState, useEffect } from 'react';
import { Form, Modal, Input, Button } from 'antd';
import { objectMapper } from '@/utils/commons';
import { useTranslation } from 'react-i18next';

import ProductsTypesSelector from '@/components/ProductsTypesSelector';
import useProductsStore from '@/stores/Products/Index';
import { useNewProductRecord, useProductsTypesMapVal } from '@/hooks/useProductsSets';
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
import RequireAuth from '@/components/RequireAuth';
import { PERM_PRODUCTS_OFFER_PUT, PERM_PRODUCTS_NEW } from '@/config';

export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
  const { t } = useTranslation('products');
  const [form] = Form.useForm();

  useEffect(() => {
    onFormInstanceReady(form);
  }, []);

  const [pickType, setPickType] = useState({ value: '6' });
  const onValuesChange = (changeValues, allValues) => {
    if ('products_type' in changeValues) {
      setPickType(changeValues.products_type);
    }
  };

  return (
    <Form layout='horizontal' form={form} name='new_product_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
      <Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]} tooltip={false}>
        <ProductsTypesSelector maxTagCount={1} mode={null} placeholder={t('common:All')} />
      </Form.Item>
      <Form.Item name={`title`} label={t('products:Title')} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${pickType.value}`)} dependencies={['products_type']}>
        {/* ${pickType.value} */}
        <Input placeholder={t(`FormTooltip.NewTitle.${pickType.value}`)} />
      </Form.Item>
    </Form>
  );
};
const formValuesMapper = (values) => {
  const destinationObject = {
    'products_types': {
      key: 'products_types',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
      },
    },
  };
  let dest = {};
  const { ...omittedValue } = values;
  dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
  for (const key in dest) {
    if (Object.prototype.hasOwnProperty.call(dest, key)) {
      dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
    }
  }
  // omit empty
  // Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
  return dest;
};
/**
 *
 */
export const NewProductModal = ({ initialValues }) => {
  const { t } = useTranslation();
  const [formInstance, setFormInstance] = useState();
  const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
  const [switchParams] = useProductsStore((state) => [state.switchParams]);

  const [open, setOpen] = useState(false);
  const [copyLoading, setCopyLoading] = useState(false);
  const productsTypesMapVal = useProductsTypesMapVal();
  const newProduct = useNewProductRecord();
  const { language } = useDefaultLgc();
  const handelAddProduct = (param) => {
    const copyNewProduct = structuredClone(newProduct);
    copyNewProduct.info.title = param.title;
    copyNewProduct.info.product_title = param.title;
    copyNewProduct.info.product_type_id = productsTypesMapVal[param.products_type.value].value;
    copyNewProduct.info.product_type_name = productsTypesMapVal[param.products_type.value].label;
    copyNewProduct.lgc_details[0].lgc = language;
    copyNewProduct.lgc_details[0].title = param.title;
    copyNewProduct.quotation[0].use_dates_start = `${switchParams.use_year}-01-01`;
    copyNewProduct.quotation[0].use_dates_end = `${switchParams.use_year}-12-31`;
    setEditingProduct(copyNewProduct);
    // if (typeof onSubmit === 'function') {
    // onSubmit();
    // }
    setOpen(false);
    return false;
  };
  return (
    <>
      <RequireAuth subject={PERM_PRODUCTS_NEW}>
        <Button size='small' type={'primary'} onClick={() => setOpen(true)}>
          {t('New')}
          {t('products:#')}
        </Button>
      </RequireAuth>

      <Modal
        width={600}
        open={open}
        title={`${t('common:New')}${t('products:#')}`}
        okButtonProps={{
          autoFocus: true,
        }}
        confirmLoading={copyLoading}
        onCancel={() => {
          // onCancel();
          setOpen(false);
          formInstance?.resetFields();
        }}
        destroyOnClose
        onOk={async () => {
          try {
            const values = await formInstance?.validateFields();
            // formInstance?.resetFields();
            const dest = formValuesMapper(values);
            handelAddProduct(dest);
          } catch (error) {
            console.log('Failed:', error);
          }
        }}>
        <NewProductsForm
          initialValues={initialValues}
          onFormInstanceReady={(instance) => {
            setFormInstance(instance);
          }}
        />
      </Modal>
    </>
  );
};
export default NewProductModal;