import {Button, Space} from "@douyinfe/semi-ui";
import {useTranslation} from "react-i18next";
import {useSetState} from "ahooks";
import dayjs from "dayjs";

import styles from "@/pages/manual/manual.module.less";
import {BillDetailItems, useBillQRCode} from "@/components/bill/index.ts";
import {getPayUrl} from "@/components/bill/qr-code.tsx";

import './bill.less'


type BillDetailProps = {
	onCancel: () => void;
	bill: BillModel;
}
const BillDetail: BasicComponent<BillDetailProps> = ({bill, onCancel}) => {
	const {t} = useTranslation();
	const {exportQRCode, QRCode} = useBillQRCode()
	const [state, setState] = useSetState<{ success: boolean }>({
		success: false
	})

	const onCopy = () => {
		const payUrl = getPayUrl(bill.id,'link');
		navigator.clipboard.writeText(payUrl).then(() => {
			setState({success: true})
			setTimeout(() => {
				setState({success: false})
			}, 3000)
		})
	}
	return <div className={'modal-bill-detail'}>
		<div className={'modal-bill-info'}>
			<div className={'bill-qr-code'}>
				<div className={styles.QRCodeContainer}>
					<QRCode size={160} className={styles.qrCode} bill={bill}/>
				</div>
			</div>
			<div className={'bill-info-detail'}>
				<div
					className={'bill-exp-time text-center'}> {t('manual.exp_time')} {dayjs(bill.expiration_time).format('YYYY-MM-DD HH:mm')} </div>
				<BillDetailItems bill={bill}/>
			</div>
		</div>
		<div className="text-center semi-modal-footer">
			<Space spacing={1}>
				<Button
					disabled={state.success} style={{width: 150}} theme={'borderless'}
					onClick={onCopy} type={'tertiary'}>{state.success ? 'Copy Success' : t('base.copy-pay-url')}</Button>
				<Button type="primary" onClick={onCancel}>{t('base.close')}</Button>
				<Button theme={'solid'} type="primary" onClick={exportQRCode}>{t('bill.download-qr-code')}</Button>
			</Space>
		</div>
	</div>
}
export default BillDetail