import React, { useState, useEffect } from 'react'
import LogAuth from './View'
import { listTransReconciliation } from 'app/apis/Functions/reconciliation'
import { useHistory } from 'react-router-dom'
import { toPriceVnd, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import { useTranslation } from 'react-i18next'
import {
    dropdownProduct,
    dropdownProvider,
    dropdownListPayType,
} from 'app/apis/Functions/dropdown'

const ToolNotificate = (props) => {
    const [txtSearch, setTxtSearch] = useState('')
    const [applications, setApplications] = useState('')
    const [pageIndex, setPageIndex] = useState(0)
    const [pageSize] = useState(10)
    const [totalRecords, setTotalRecord] = useState(0)
    const history = useHistory()
    const searchDebount = useDebounce(txtSearch, 1000)
    const [startDate, setStartDate] = useState()
    const [endDate, setEndDate] = useState()
    const { t } = useTranslation()
    const [data, setData] = useState([])
    const [type, setType] = useState()
    const [listType, setListType] = useState([])
    const [listProvide, setListProvide] = useState([])
    const [provide, setProvide] = useState()
    const [listProduct, setListProduct] = useState([])
    const [product, setProduct] = useState()
    const [status, setStatus] = useState()

    useEffect(() => {
        getData(false)
    }, [pageIndex])

    useEffect(() => {
        getData(true)
    }, [searchDebount, startDate, type, provide, product, status])

    useEffect(() => {
        getDataDropdown()
    }, [])

    const changeDateRange = (start, end) => {
        setStartDate(start)
        setEndDate(end)
    }

    const renderStatusName = (status) => {
        if (status == 3) return 'Đã đối soát'
        if (status == 2) return 'Đang đối soát'
        return 'Chưa đối soát'
    }

    const getData = async (init) => {
        props.showLoading()
        let res
        if (init) {
            setPageIndex(0)
            res = await listTransReconciliation({
                page_no: 0,
                page_size: pageSize,
                text: searchDebount,
                date_from: startDate ? convertDate(startDate) : null,
                date_to: endDate ? convertDate(endDate) : null,
                product_code: product ? product : null,
                payment_gate_code: provide ? provide : null,
                statusReconciliation: status ? status : 0,
                type_payment: type ? type : null,
            })
        } else {
            res = await listTransReconciliation({
                page_no: pageIndex + 1,
                page_size: pageSize,
                text: searchDebount,
                date_from: startDate ? convertDate(startDate) : null,
                date_to: endDate ? convertDate(endDate) : null,
                product_code: product ? product : null,
                payment_gate_code: provide ? provide : null,
                statusReconciliation: status ? status : 0,
                type_payment: type ? type : null,
            })
        }

        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            const newList = res.data.data?.data?.map((e, i) => {
                return {
                    ...e,
                    index: i + 1 + pageIndex * pageSize,
                }
            })
            setData(newList)
            setTotalRecord(res.data.data.total_elements)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    const getDataDropdown = async () => {
        const res = await dropdownProvider({})
        if (res.data.code == 200 && res.data.data) {
            const newList = res.data.data.map((e) => {
                return { ...e, id: e.code }
            })
            setListProvide(newList)
        }

        const resPro = await dropdownProduct({})
        if (resPro.data.code == 200 && resPro.data.data) {
            const newList = resPro.data.data.map((e) => {
                return { ...e, id: e.product_code, name: e?.product_name }
            })
            setListProduct(newList)
        }

        const resType = await dropdownListPayType()

        if (resType.data.code == 200 && resType.data.data) {
            const newList = resType.data.data.map((item) => {
                return { ...item }
            })

            setListType(newList)
        }
    }

    return (
        <LogAuth
            data={data}
            setTxtSearch={setTxtSearch}
            pageIndex={pageIndex}
            setPageIndex={setPageIndex}
            totalRecords={totalRecords}
            setApplications={setApplications}
            applications={applications}
            startDate={startDate}
            changeDateRange={changeDateRange}
            type={type}
            setType={setType}
            listType={listType}
            listProvide={listProvide}
            listProduct={listProduct}
            provide={provide}
            setProvide={setProvide}
            product={product}
            setProduct={setProduct}
            status={status}
            setStatus={setStatus}
        />
    )
}

const mapStateToProps = (state) => {
    return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
    ToolNotificate
)
