// MyAccountApp.js
import React, {useState, useContext, useEffect} from 'react';
import MyAccountTop from '../components/MyAccountTop';
import ReferralCard from '../components/ReferralCard';
import ShareEmail from '../components/ShareEmail';
import PointBoard from '../components/PointBoard';
import ReferralTable from '../components/ReferralTable';
import RewardCouponsTable from '../components/RewardCouponsTable';
import RewardPointsTable from '../components/RewardPointsTable';
import { FrontendContext } from './FrontendContext';


function MyAccountApp() {
    const {isPro, settings, rewardlDiscountType } = useContext(FrontendContext);

    return (
        <div className="echo-rewards-myaccount">
            <MyAccountTop />

            <div className="ecre-flex ecre-justify-center ecre-mb-12">
                <div className="wrapper ecre-max-w-[483px]">
                    <ReferralCard />
                   { (settings.canRefferOthers && ecreFrontend.has_orders) || !settings.canRefferOthers ?  (
                    <>
                    {settings.enableRefferalEmailInvitation && <ShareEmail /> }
                    </>
                   ): ''}
                    
                </div>
            </div>

            { isPro && (
                <div className="ecre-flex ecre-justify-center ecre-mb-12">
                    <div className="wrapper ecre-w-full">
                        { isPro && rewardlDiscountType == 'reward_point' && <PointBoard /> }
                    </div>
                </div>
            )}
           

            { (settings.canRefferOthers && ecreFrontend.has_orders) || !settings.canRefferOthers ? (
                <div className="rewards-invites">
                    { rewardlDiscountType !== 'reward_point' && <RewardCouponsTable /> }
                    { isPro && rewardlDiscountType == 'reward_point' && <RewardPointsTable /> }
                    <ReferralTable />
                </div>
            ):''}
           
        </div>
    );
}

export default MyAccountApp;