import React, { useEffect, useState } from 'react';
import { Card, Tag, List, Button, Modal, Form, Selector, Input, Popup } from 'antd-mobile';
import { QRCode, Alert } from 'antd';
import Styles from './web.mobile.module.less';
import * as dayJs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayJs.extend(duration);
import { CentToString } from 'oak-domain/lib/utils/money';
import { PayCircleOutline, GlobalOutline, InformationCircleOutline, CheckCircleOutline } from 'antd-mobile-icons';
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
export function RenderOffline(props) {
    const { pay, t, offline, offlines, updateOfflineId, updateExternalId } = props;
    const { meta, iState, phantom3, externalId } = pay;
    const { type, channel, name, qrCode, color } = offline || {};
    const [show, setShow] = useState(false);
    const items2 = [
        <Form.Item key="type" label={<span className={Styles.bold}>{`${t('channel.prefix')}`}</span>}>
            {iState === 'paying' && offlines.length > 1 ?
                <Button onClick={() => setShow(true)}>{t(`offlineAccount:v.type.${type}`)}</Button> :
                <span className={Styles.value}>{t(`offlineAccount:v.type.${type}`)}</span>}
        </Form.Item>,
        <Form.Item key="code" label={<span className={Styles.bold}>{t('code.label')}</span>}>
            <Tag color="red">
                <span style={{ fontSize: 'large' }}>{phantom3}</span>
            </Tag>
        </Form.Item>,
        <Form.Item key="externalId" label={<span className={Styles.bold}>{t('externalId.label')}</span>}>
            <Input autoFocus value={externalId || ''} onChange={(value) => {
                updateExternalId(value);
            }} placeholder={t('externalId.help')} disabled={iState !== 'paying'}/>
        </Form.Item>
    ];
    if (type === 'bank') {
        items2.push(<Form.Item key="channel" label={t('offlineAccount::label.channel.bank')}>
                <span className={Styles.value}>{channel}</span>
            </Form.Item>, <Form.Item key="name" label={t('offlineAccount::label.name.bank')}>
                <span className={Styles.value}>{name}</span>
            </Form.Item>, <Form.Item key="qrCode" label={t('offlineAccount::label.qrCode.bank')}>
                <span className={Styles.value}>{qrCode}</span>
            </Form.Item>);
    }
    else {
        if (type === 'others') {
            items2.push(<Form.Item key="channel" label={t('offlineAccount::label.channel.others')}>
                    <span className={Styles.value}>{channel}</span>
                </Form.Item>);
        }
        if (name) {
            items2.push(<Form.Item key="name" label={t(`offlineAccount::label.name.${type}`)}>
                    <span className={Styles.value}>{name}</span>
                </Form.Item>);
        }
        if (qrCode) {
            items2.push(<Form.Item key="qrCode" label={t(`offlineAccount::label.qrCode.${type}`)}>
                    <span className={Styles.qrCode} onClick={() => Modal.show({
                    content: <QRCode style={{ width: '70vw', height: '70vw' }} value={qrCode} color={color}/>,
                    closeOnMaskClick: true,
                })}>
                        <QRCode value={qrCode} size={110} color={color}/>
                    </span>
                </Form.Item>);
        }
    }
    return (<>
            <Popup visible={show} onMaskClick={() => {
            setShow(false);
        }} onClose={() => {
            setShow(false);
        }} position='bottom' bodyStyle={{ padding: 18 }}>
                <Selector options={offlines.map(ele => ({
            label: t(`offlineAccount:v.type.${ele.type}`),
            value: ele.id,
        }))} value={offline ? [offline.id] : []} onChange={(arr) => {
            updateOfflineId(arr[0]);
            setShow(false);
        }}/>
            </Popup>
            <Form layout="horizontal" style={{ width: '100%', marginTop: 12 }}>
                {items2}
            </Form>
        </>);
}
function Counter(props) {
    const { deadline } = props;
    const [counter, setCounter] = useState('');
    const timerFn = () => {
        const now = Date.now();
        if (now < deadline) {
            const duration = dayJs.duration(deadline - now);
            setCounter(duration.format('HH:mm:ss'));
            setTimeout(timerFn, 1000);
        }
    };
    useEffect(() => {
        timerFn();
    }, []);
    return (<div className={Styles.counter}>{counter}</div>);
}
function RenderWechatPay(props) {
    const { pay, t } = props;
    const { externalId, wpProduct, timeoutAt, iState } = pay;
    if (iState === 'paid') {
        return (<div className={Styles.paid}>
                <CheckCircleOutline fontSize={72} fontWeight="bold" color="green"/>
                <div className={Styles.text}>
                    {t('success')}
                </div>
            </div>);
    }
    switch (wpProduct.type) {
        case 'native': {
            if (iState === 'paying') {
                return (<>
                        <Counter deadline={timeoutAt}/>
                        <QRCode value={externalId} size={280} color="#04BE02"/>
                        <div className={Styles.qrCodeTips}>
                            {process.env.NODE_ENV === 'production' ?
                        <Alert type="info" message={t('wechat.native.tips')}/> :
                        <Alert type="warning" message={t('wechat.native.tips2')}/>}
                        </div>
                    </>);
            }
            break;
        }
    }
    return null;
}
function RenderPayMeta(props) {
    const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId } = props;
    const { iState, entity } = pay;
    if (entity !== 'offlineAccount' && notSameApp) {
        return <Alert type='warning' message={t('notSameApp')}/>;
    }
    switch (entity) {
        case 'offlineAccount': {
            if (offline && offlines) {
                return (<>
                        {iState === 'paying' && <Alert type='info' message={t('code.help')} style={{ marginBottom: 10 }}/>}
                        <RenderOffline t={t} pay={pay} offline={offline} offlines={offlines} updateOfflineId={updateOfflineId} updateExternalId={updateExternalId}/>
                    </>);
            }
            return null;
        }
        case 'wpProduct': {
            return <RenderWechatPay pay={pay} t={t}/>;
        }
    }
    return null;
}
export default function Render(props) {
    const { pay, iStateColor, notSameApp, type, startPayable, oakExecutable, onClose, closable, offline, offlines } = props.data;
    const { t, update, execute, clean, goBack, startPay } = props.methods;
    if (pay) {
        const { iState, price, entity } = pay;
        let BtnPart = closable ? (<Button block color="danger" onClick={() => {
                Modal.confirm({
                    title: t('cc.title'),
                    content: t('cc.content'),
                    onConfirm: async () => {
                        await execute('close');
                        onClose();
                    }
                });
            }}>
                {t('pay:action.close')}
            </Button>) : startPayable ? (<Button block style={{ backgroundColor: '#04BE02' }} className={Styles.btnWechatPay} onClick={() => startPay()}>
                {t('pay')}
            </Button>) : oakExecutable === true ? (<>
                <div className={Styles.btnItem}>
                    <Button block color='primary' onClick={() => execute()}>
                        {t('common::action.update')}
                    </Button>
                </div>
                <div className={Styles.btnItem}>
                    <Button block onClick={() => clean()}>
                        {t('common::reset')}
                    </Button>
                </div>
            </>) : (<Button block color="primary" onClick={goBack}>
                {t('common::back')}
            </Button>);
        return (<div className={Styles.container}>
                <Card title={t('title')} extra={<Tag color={iStateColor}>{t(`pay:v.iState.${iState}`)}</Tag>}>
                    <div>
                        <List>
                            <List.Item prefix={<InformationCircleOutline />} extra={t(`type.${type}`)}>
                                {t('type.label')}
                            </List.Item>
                            <List.Item prefix={<PayCircleOutline />} extra={CentToString(price, 2)}>
                                {t('pay:attr.price')}
                            </List.Item>
                            <List.Item prefix={<GlobalOutline />} extra={t(`payChannel::${entity}`)}>
                                {t('pay:attr.entity')}
                            </List.Item>
                        </List>
                    </div>
                </Card>
                <div className={Styles.meta}>
                    <RenderPayMeta pay={pay} t={t} notSameApp={notSameApp} offline={offline} offlines={offlines} updateOfflineId={async (entityId) => {
                execute(undefined, undefined, undefined, [
                    {
                        entity: 'pay',
                        operation: {
                            id: await generateNewIdAsync(),
                            action: 'update',
                            data: {
                                entity: 'offlineAccount',
                                entityId,
                            },
                            filter: {
                                id: props.data.oakId,
                            },
                        }
                    }
                ]);
            }} updateExternalId={(externalId) => {
                update({ externalId });
            }}/>
                </div>
                <div className={Styles.padding}/>
                <div className={Styles.btn}>
                    {BtnPart}
                </div>
            </div>);
    }
    return null;
}