import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { useEffect, useRef, useState } from 'react';
import './index.less';

type Props = {
    /** 是否展示弹窗 */
    show?: boolean;
    /** 点击「取消」回调 */
    onCancel?: () => void;
    /** 点击「确认」回调 */
    onConfirm?: () => void;
};

const ANIMATION_DURATION_MS = 300; // 弹窗开合动画时长

/**
 * 后备箱开启二次确认弹窗（居中，取消/确认双按钮）。
 * 容器/遮罩/标题沿用项目居中弹窗规范（over-popup），新增横向双按钮 + 实心主按钮。
 */
export default function TrunkConfirmPopup({ show = false, onCancel, onConfirm }: Props) {
    const [visible, setVisible] = useState(false); // 关闭动画保活标记
    const [animationData, setAnimationData] = useState<any>();
    const closeTimerRef = useRef<any>(null);

    // 控制弹窗开合：打开时立即渲染并入场，关闭时保留退场动画
    useEffect(() => {
        if (closeTimerRef.current) {
            clearTimeout(closeTimerRef.current);
            closeTimerRef.current = null;
        }

        if (show) {
            setVisible(true);
            const animation = Taro.createAnimation({ duration: ANIMATION_DURATION_MS, timingFunction: 'ease-out' });
            animation.opacity(1).scale(1).step();
            setAnimationData(animation.export());
            return;
        }

        if (!visible) {
            return;
        }

        const animation = Taro.createAnimation({ duration: ANIMATION_DURATION_MS, timingFunction: 'ease-in' });
        animation.opacity(0).scale(0.8).step();
        setAnimationData(animation.export());
        closeTimerRef.current = setTimeout(() => {
            setVisible(false);
            closeTimerRef.current = null;
        }, ANIMATION_DURATION_MS);
    }, [show, visible]);

    // 卸载时清理定时器
    useEffect(() => {
        return () => {
            if (closeTimerRef.current) {
                clearTimeout(closeTimerRef.current);
            }
        };
    }, []);

    if (!visible) {
        return null;
    }

    return (
        <View className='trunk-confirm-popup' catchMove>
            <View className='trunk-confirm-mask'></View>
            <View className='trunk-confirm-content' animation={animationData}>
                <View className='trunk-confirm-title'>
                    <View>请确认后备箱周边安全</View>
                    <View>确认开启吗?</View>
                </View>
                <View className='trunk-confirm-btns'>
                    <View className='trunk-confirm-btn trunk-confirm-btn-cancel' onClick={onCancel}>取消</View>
                    <View className='trunk-confirm-btn trunk-confirm-btn-primary' onClick={onConfirm}>确认</View>
                </View>
            </View>
        </View>
    );
}