Untitled

import { Form, FormInstance } from 'antd'
import React, { createRef, useCallback, useEffect, useMemo, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'

import Topbar from '@components/Topbar'
import { useCreatePricelist } from '@packages/marketplace/hooks/usePriceList'
import priceStore from '@packages/marketplace/stores/priceStore'
import notification from '@utils/notification'
import applyToStore from '@packages/marketplace/stores/applyToStore'
import { convertQueryToObject } from '@packages/marketplace/helper/pricelistHelper'

import EditableTablePrice from './components/EditableTablePrice'
import FormInfoPricelist from './components/FormInfoPricelist'
import ModalCancel from './components/ModalCancel'
import { ButtonCustomStyled, WrapButton } from './styles'

const Index: React.FC = () => {
	const formRef = createRef<FormInstance>()
	const navigate = useNavigate()

	const { search }: any = useLocation()

	const param = useMemo(() => {
		return search ? convertQueryToObject(search) : null
	}, [search])

	const [setApplyTo, farmer, setFarmer, setBusinessType] = applyToStore((state) => [
		state.setApplyTo,
		state.farmer,
		state.setFarmer,
		state.setBusinessType,
	])

	const [modalCancel, setModalCancel] = useState(false)

	const [isLoadingCreatePrice, handleCreatePrice] = useCreatePricelist()
	const [priceList] = priceStore((state) => [state.priceList])
	const [disableFarmer, setDisableFarmer] = useState(false)

	const _handleSubmitPricelist = useCallback(
		(item: any) => {
			const formBody = {
				...item,
			}
			try {
				formBody.leads_id = farmer ? farmer.lead_id : null
				formBody.valid_from = formBody.valid_date[0].format('YYYY-MM-DD')
				formBody.valid_to = formBody.valid_date[1].format('YYYY-MM-DD')
				formBody.province = formBody.province?.reduce((acc: any, curr: any) => {
					acc.push(parseInt(curr.split(',')[0]))
					return acc
				}, [])
				formBody

				const tempData = priceList[priceList.length - 1]
				const mappingDataPrice = tempData?.map((item: any) => {
					const newItem = {
						product_id: parseInt(item.product_name.split(',')[0]),
						price: {
							cash: item.cash,
							tenor: [
								{
									tenor_month: 1,
									tenor_price: item.tenor_price_1,
								},
								{
									tenor_month: 2,
									tenor_price: item.tenor_price_2,
								},
								{
									tenor_month: 3,
									tenor_price: item.tenor_price_3,
								},
							],
						},
					}
					return newItem
				})

				formBody.price_list_item = mappingDataPrice

				!formBody.province && (formBody.province = [])
				delete formBody.valid_date
				formBody.apply_to !== 'Farmer' && delete formBody.leads_id
				if (formBody.price_list_item.length < 1) {
					notification.error({ title: 'Gagal!', description: `Product section harus diisi` })
				} else {
					handleCreatePrice(formBody, () => {
						navigate('/marketplace/pricelist')
						setFarmer(null)
					})
				}
			} catch (err: any) {
				const { message } = err
				notification.error({ title: 'Gagal', description: `${message}` })
			}
		},
		[handleCreatePrice, priceList],
	)

	useEffect(() => {
		if (param) {
			formRef.current?.setFieldsValue({
				price_list_name: param.file_name,
				apply_to: param.apply_to,
				leads_id: param.leads_id,
				business_type: param.business_type,
			})
			setBusinessType(param.business_type)
			setFarmer({ lead_id: param.leads_id })
			setApplyTo(param.apply_to)
			setDisableFarmer(true)
		}
	}, [param])

	return (
		<div>
			<Topbar title="Tambah Pricelist" customOnClick={() => setModalCancel(true)} />
			<Form ref={formRef} onFinish={(e) => _handleSubmitPricelist(e)} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
				<FormInfoPricelist formRef={formRef} disableFarmer={disableFarmer} />
				<EditableTablePrice formRef={formRef} />

				<WrapButton>
					<ButtonCustomStyled htmlType="submit" type="primary" loading={isLoadingCreatePrice}>
						Simpan
					</ButtonCustomStyled>
				</WrapButton>
			</Form>

			<ModalCancel visible={modalCancel} onCancel={() => setModalCancel(false)} />
		</div>
	)
}

export default Index