import {BillList} from "@/components/bill/list.tsx";
import {Button, Modal, Notification, Popconfirm, Space} from "@douyinfe/semi-ui";
import {useState} from "react";
import {useRequest} from "ahooks";
import {useTranslation} from "react-i18next";
import * as Sentry from "@sentry/react";

import SearchForm from "@/components/bill/search-form.tsx";
import BillDetail from "@/components/bill/detail.tsx";
import {billList, BillQueryParams, cancelBill} from "@/service/api/bill.ts";
import {BillStatus} from "@/service/types.ts";
import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";

const BillQuery = () => {
    const [showBill, setShowBill] = useState<BillModel>()
    const [queryParams, setBillQueryParams] = useState<BillQueryParams>({});
    const {data, loading, refresh} = useRequest(() => billList(queryParams), {
        refreshDeps: [queryParams],
        onError: (e) => {
            Sentry.captureMessage('Error: Query bill error', {
                level: 'error',
                extra: {
                    message: e.message,
                    ...queryParams
                }
            });
        }
    })
    const {loading: downloading, downloadPDF} = useDownloadReceiptPDF()
    const {t} = useTranslation()

    const onConfirmCancel = (bill: BillModel) => {
        cancelBill(bill.id).then(() => {
            Notification.success({title: 'Notice', content: t('bill.cancel_success')})
            refresh()
        })
    }
    const operation = (bill: BillModel) => {
        return (<Space>
            {bill.status == BillStatus.PENDING && <>
                <Popconfirm
                    title={'Notice'}
                    content={`${t('bill.cancel_confirm')}?`}
                    onConfirm={() => onConfirmCancel(bill)}
                >
                    <Button size={'small'} theme={'solid'} type={'primary'}>{t('bill.cancel')}</Button>
                </Popconfirm>
                <Button onClick={() => setShowBill(bill)} size={'small'} theme={'solid'}
                        type={'primary'}>{t('base.qr-code')}</Button>
                {AppMode == 'development' && <a href={`/pay?bill=${bill.id}`} target={'_blank'}>Payment</a>}
            </>}
            {
                bill.status == BillStatus.PAID
                && <Button
                    onClick={() => downloadPDF(bill)} size={'small'} theme={'solid'}
                    type={'primary'} loading={downloading}>{t('bill.download_receipt')}</Button>
            }
        </Space>)
    }
    return (<div>
        <SearchForm showApply loading={loading} onSearch={setBillQueryParams}/>
        <BillList
            type={'query'} loading={loading}
            operationRender={operation} source={data}
            onPageChange={(page_number) => {
                setBillQueryParams({
                    ...queryParams,
                    page_number
                })
            }}
        />
        <Modal
            title="Bill Detail"
            visible={!!showBill}
            width={620}
            onCancel={() => setShowBill(undefined)} //>=1.16.0
            closeOnEsc={true}
            footer={null}
            closeIcon={<span></span>}
        >
            {showBill && <BillDetail bill={showBill} onCancel={() => setShowBill(undefined)}/>}
        </Modal>
    </div>)
}
export default BillQuery