import SvgIcon from '@components/SvgIcon';
import styles from './styles.module.scss';
import iconImg from '@assets/icon_order_check.webp';
import helpImg from '@assets/icon_service.webp';
import { useNavigate } from 'react-router';
import { ROUTE_PATH } from '@constants/routes';
import { useThemeProvider } from '@contexts/themeContext';
import { toast } from "react-toastify";

const WCheckOrder = () => {

    const { openService } = useThemeProvider();

    const navigate = useNavigate();

    const handleCompleted = () => {
        toast.warn("your order has not been paid.",{toastId: 'order_not_paid'});
    }

    const handleCancel = () => {
        navigate(ROUTE_PATH.HOME, { replace: true });
    }

    const handleHelp = () => {
        openService();
    }

    return (
        <>
            <div className={styles.container}>
                <img src={iconImg} />
                <p>
                    <span>1. If you have paid successfully, plase click the "Payment Completed" button</span>
                    <br />
                    <span>2. If you haven't paid, plase click "Cancel"</span>
                </p>

                <button onClick={handleCompleted}>Payment has been completed</button>
                <button onClick={handleCancel}>Cancel</button>

                <img src={helpImg} className={styles.help} onClick={handleHelp}></img>
            </div>
        </>

    )
}

export default WCheckOrder;