import React , { useContext } from 'react';
import { FrontendContext } from '../App/FrontendContext';
import Loader from '../../components/core/Loader';
import { translate } from '../../Helper';

function PointBoard() {

    const { settings, loadingSettings, currency } = useContext(FrontendContext);

    if (loadingSettings || !settings || Object.keys(settings).length === 0) {
        return <Loader />;
    }


    return (
        <div className="reward-points ecre-p-4 ecre-bg-purple-50 ecre-rounded-lg">
            <ul className="ecre-list-none ecre-p-0 ecre-flex ecre-flex-wrap ecre-justify-between ecre-gap-2 !ecre-mt-0 !ecre-mb-4">
                <li className="ecre-flex ecre-gap-2">
                    <div className="text">
                        <div className="number ecre-text-zinc-600 ecre-text-[16px] ecre-font-semibold ecre-leading-[18px] ecre-mb-[2px]">{ecreFrontend.total_points}</div>
                        <div className="ecre-text-zinc-700 ecre-text-[14px] ecre-font-medium"> {translate('total_earned_points')} </div>
                        <div className="ecre-text-zinc-500 ecre-text-[10px] ecre-font-normal">{translate('points_earned_so_far')}</div>
                    </div>
                </li>
                <li className="ecre-flex ecre-gap-2">
                    <div className="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="45" height="46" viewBox="0 0 45 46" fill="none">
                            <g clipPath="url(#clip0_194_14762)">
                                <path d="M20.8637 43.4545C32.1605 43.4545 41.3183 34.2967 41.3183 23C41.3183 11.7033 32.1605 2.54544 20.8637 2.54544C9.56699 2.54544 0.40918 11.7033 0.40918 23C0.40918 34.2967 9.56699 43.4545 20.8637 43.4545Z" fill="#E7EFFF"/>
                                <path d="M20.8639 38.1364C29.2235 38.1364 36.0003 31.3596 36.0003 23C36.0003 14.6404 29.2235 7.86365 20.8639 7.86365C12.5043 7.86365 5.72754 14.6404 5.72754 23C5.72754 31.3596 12.5043 38.1364 20.8639 38.1364Z" fill="#A5BCED"/>
                                <path d="M7.36399 3.36363C8.0418 3.36363 8.59126 2.81416 8.59126 2.13636C8.59126 1.45856 8.0418 0.909088 7.36399 0.909088C6.68619 0.909088 6.13672 1.45856 6.13672 2.13636C6.13672 2.81416 6.68619 3.36363 7.36399 3.36363Z" fill="#FF4D69"/>
                                <path d="M43.364 7.04546C44.0418 7.04546 44.5913 6.49599 44.5913 5.81818C44.5913 5.14038 44.0418 4.59091 43.364 4.59091C42.6862 4.59091 42.1367 5.14038 42.1367 5.81818C42.1367 6.49599 42.6862 7.04546 43.364 7.04546Z" fill="#00C99F"/>
                                <path d="M36.4089 45.0909C37.0867 45.0909 37.6362 44.5414 37.6362 43.8636C37.6362 43.1858 37.0867 42.6364 36.4089 42.6364C35.7311 42.6364 35.1816 43.1858 35.1816 43.8636C35.1816 44.5414 35.7311 45.0909 36.4089 45.0909Z" fill="#FFA100"/>
                                <path d="M5.31809 43.4545C5.9959 43.4545 6.54537 42.9051 6.54537 42.2273C6.54537 41.5495 5.9959 41 5.31809 41C4.64029 41 4.09082 41.5495 4.09082 42.2273C4.09082 42.9051 4.64029 43.4545 5.31809 43.4545Z" fill="#00C99F"/>
                                <path d="M41.7269 25.4545C41.7265 25.792 41.8305 26.1214 42.0246 26.3975C42.2186 26.6736 42.4933 26.8829 42.811 26.9968C42.9685 27.0464 43.1065 27.1441 43.2055 27.2762C43.3046 27.4083 43.3598 27.5681 43.3633 27.7332V34.0454C43.3633 34.2624 43.2771 34.4705 43.1236 34.624C42.9702 34.7774 42.7621 34.8636 42.5451 34.8636H33.3692C33.2041 34.8601 33.0443 34.805 32.9122 34.7059C32.7801 34.6068 32.6824 34.4688 32.6328 34.3113C32.5198 33.9927 32.3109 33.7168 32.0347 33.5217C31.7585 33.3266 31.4287 33.2219 31.0906 33.2219C30.7524 33.2219 30.4226 33.3266 30.1464 33.5217C29.8702 33.7168 29.6613 33.9927 29.5483 34.3113C29.4987 34.4688 29.401 34.6068 29.2689 34.7059C29.1368 34.805 28.977 34.8601 28.8119 34.8636H8.18146C7.96447 34.8636 7.75636 34.7774 7.60292 34.624C7.44948 34.4705 7.36328 34.2624 7.36328 34.0454V16.0454H29.4542C29.4542 16.4794 29.6266 16.8956 29.9335 17.2025C30.2403 17.5094 30.6566 17.6818 31.0906 17.6818C31.5245 17.6818 31.9408 17.5094 32.2476 17.2025C32.5545 16.8956 32.7269 16.4794 32.7269 16.0454H42.5451C42.7621 16.0454 42.9702 16.1316 43.1236 16.2851C43.2771 16.4385 43.3633 16.6466 43.3633 16.8636V23.1759C43.3598 23.341 43.3046 23.5008 43.2055 23.6329C43.1065 23.765 42.9685 23.8627 42.811 23.9123C42.4933 24.0262 42.2186 24.2355 42.0246 24.5116C41.8305 24.7877 41.7265 25.117 41.7269 25.4545Z" fill="#323FD4"/>
                                <path d="M34.7726 20.5454C34.7722 20.8829 34.8761 21.2123 35.0702 21.4884C35.2643 21.7645 35.539 21.9738 35.8567 22.0877C36.0142 22.1373 36.1521 22.235 36.2512 22.3671C36.3503 22.4992 36.4054 22.659 36.4089 22.8241V29.1364C36.4089 29.3533 36.3227 29.5615 36.1693 29.7149C36.0159 29.8683 35.8077 29.9545 35.5908 29.9545H26.4148C26.2498 29.951 26.0899 29.8959 25.9579 29.7968C25.8258 29.6977 25.7281 29.5598 25.6785 29.4023C25.5655 29.0836 25.3565 28.8077 25.0803 28.6126C24.8042 28.4175 24.4743 28.3128 24.1362 28.3128C23.7981 28.3128 23.4682 28.4175 23.1921 28.6126C22.9159 28.8077 22.7069 29.0836 22.5939 29.4023C22.5443 29.5598 22.4466 29.6977 22.3146 29.7968C22.1825 29.8959 22.0226 29.951 21.8576 29.9545H1.6362C0.51202 26.8432 0.159243 23.5057 0.608126 20.2282C1.05701 16.9506 2.29416 13.8308 4.21348 11.1364H21.8576C22.0226 11.1399 22.1825 11.195 22.3146 11.2941C22.4466 11.3932 22.5443 11.5311 22.5939 11.6886C22.7069 12.0073 22.9159 12.2832 23.1921 12.4783C23.4682 12.6734 23.7981 12.7781 24.1362 12.7781C24.4743 12.7781 24.8042 12.6734 25.0803 12.4783C25.3565 12.2832 25.5655 12.0073 25.6785 11.6886C25.7281 11.5311 25.8258 11.3932 25.9579 11.2941C26.0899 11.195 26.2498 11.1399 26.4148 11.1364H35.5908C35.8077 11.1364 36.0159 11.2226 36.1693 11.376C36.3227 11.5294 36.4089 11.7375 36.4089 11.9545V18.2668C36.4054 18.4319 36.3503 18.5917 36.2512 18.7238C36.1521 18.8559 36.0142 18.9536 35.8567 19.0032C35.539 19.1171 35.2643 19.3264 35.0702 19.6025C34.8761 19.8786 34.7722 20.208 34.7726 20.5454Z" fill="#4E6AFF"/>
                                <path d="M24.5457 15.2273C24.5457 15.0013 24.3626 14.8182 24.1366 14.8182C23.9107 14.8182 23.7275 15.0013 23.7275 15.2273V16.0454C23.7275 16.2714 23.9107 16.4545 24.1366 16.4545C24.3626 16.4545 24.5457 16.2714 24.5457 16.0454V15.2273Z" fill="#8FA2FF"/>
                                <path d="M24.5457 18.5C24.5457 18.2741 24.3626 18.0909 24.1366 18.0909C23.9107 18.0909 23.7275 18.2741 23.7275 18.5V19.3182C23.7275 19.5441 23.9107 19.7273 24.1366 19.7273C24.3626 19.7273 24.5457 19.5441 24.5457 19.3182V18.5Z" fill="#8FA2FF"/>
                                <path d="M24.5457 21.7727C24.5457 21.5468 24.3626 21.3636 24.1366 21.3636C23.9107 21.3636 23.7275 21.5468 23.7275 21.7727V22.5909C23.7275 22.8169 23.9107 23 24.1366 23C24.3626 23 24.5457 22.8169 24.5457 22.5909V21.7727Z" fill="#8FA2FF"/>
                                <path d="M24.5457 25.0454C24.5457 24.8195 24.3626 24.6364 24.1366 24.6364C23.9107 24.6364 23.7275 24.8195 23.7275 25.0454V25.8636C23.7275 26.0896 23.9107 26.2727 24.1366 26.2727C24.3626 26.2727 24.5457 26.0896 24.5457 25.8636V25.0454Z" fill="#8FA2FF"/>
                                <path d="M26.9994 17.2727H32.7267C32.9526 17.2727 33.1357 17.0896 33.1357 16.8636C33.1357 16.6377 32.9526 16.4546 32.7267 16.4546H26.9994C26.7734 16.4546 26.5903 16.6377 26.5903 16.8636C26.5903 17.0896 26.7734 17.2727 26.9994 17.2727Z" fill="white"/>
                                <path d="M26.9994 19.7273H32.7267C32.9526 19.7273 33.1357 19.5441 33.1357 19.3182C33.1357 19.0922 32.9526 18.9091 32.7267 18.9091H26.9994C26.7734 18.9091 26.5903 19.0922 26.5903 19.3182C26.5903 19.5441 26.7734 19.7273 26.9994 19.7273Z" fill="white"/>
                                <path d="M26.9994 22.1818H32.7267C32.9526 22.1818 33.1357 21.9987 33.1357 21.7727C33.1357 21.5468 32.9526 21.3636 32.7267 21.3636H26.9994C26.7734 21.3636 26.5903 21.5468 26.5903 21.7727C26.5903 21.9987 26.7734 22.1818 26.9994 22.1818Z" fill="white"/>
                                <path d="M3.27193 28.3182H4.90829C5.13423 28.3182 5.31738 28.135 5.31738 27.9091C5.31738 27.6832 5.13423 27.5 4.90829 27.5H3.27193C3.04599 27.5 2.86284 27.6832 2.86284 27.9091C2.86284 28.135 3.04599 28.3182 3.27193 28.3182Z" fill="white"/>
                                <path d="M26.9994 24.6364H32.7267C32.9526 24.6364 33.1357 24.4532 33.1357 24.2273C33.1357 24.0013 32.9526 23.8182 32.7267 23.8182H26.9994C26.7734 23.8182 26.5903 24.0013 26.5903 24.2273C26.5903 24.4532 26.7734 24.6364 26.9994 24.6364Z" fill="white"/>
                                <path d="M7.36358 25.4545C7.20225 25.4538 7.04473 25.4055 6.91082 25.3155C6.7769 25.2256 6.67256 25.0981 6.61092 24.949C6.54927 24.7999 6.53308 24.6359 6.56436 24.4777C6.59565 24.3194 6.67302 24.1739 6.78676 24.0595L14.9686 15.8777C15.1251 15.7437 15.3264 15.6736 15.5323 15.6816C15.7383 15.6895 15.9336 15.7749 16.0793 15.9206C16.225 16.0663 16.3104 16.2617 16.3183 16.4676C16.3263 16.6735 16.2563 16.8748 16.1222 17.0313L7.94039 25.2132C7.78766 25.3668 7.58022 25.4536 7.36358 25.4545Z" fill="white"/>
                                <path d="M7.77193 20.1364C7.28647 20.1364 6.8119 19.9924 6.40826 19.7227C6.00461 19.453 5.69 19.0696 5.50423 18.6211C5.31845 18.1726 5.26984 17.6791 5.36455 17.203C5.45926 16.7268 5.69303 16.2895 6.0363 15.9462C6.37958 15.6029 6.81694 15.3691 7.29307 15.2744C7.76921 15.1797 8.26273 15.2283 8.71124 15.4141C9.15975 15.5999 9.5431 15.9145 9.81281 16.3181C10.0825 16.7218 10.2265 17.1963 10.2265 17.6818C10.2265 18.3328 9.96787 18.9571 9.50755 19.4174C9.04724 19.8778 8.42291 20.1364 7.77193 20.1364ZM7.77193 16.8636C7.61011 16.8636 7.45192 16.9116 7.31737 17.0015C7.18282 17.0914 7.07795 17.2192 7.01603 17.3687C6.9541 17.5182 6.9379 17.6827 6.96947 17.8414C7.00104 18.0001 7.07896 18.1459 7.19339 18.2604C7.30781 18.3748 7.4536 18.4527 7.61231 18.4843C7.77102 18.5158 7.93553 18.4996 8.08503 18.4377C8.23454 18.3758 8.36232 18.2709 8.45222 18.1364C8.54213 18.0018 8.59011 17.8436 8.59011 17.6818C8.59011 17.4648 8.50391 17.2567 8.35047 17.1033C8.19703 16.9498 7.98892 16.8636 7.77193 16.8636Z" fill="white"/>
                                <path d="M15.9545 25.8636C15.4691 25.8636 14.9945 25.7197 14.5909 25.45C14.1872 25.1802 13.8726 24.7969 13.6868 24.3484C13.5011 23.8999 13.4525 23.4064 13.5472 22.9302C13.6419 22.4541 13.8756 22.0167 14.2189 21.6734C14.5622 21.3302 14.9996 21.0964 15.4757 21.0017C15.9518 20.907 16.4454 20.9556 16.8939 21.1414C17.3424 21.3271 17.7257 21.6418 17.9954 22.0454C18.2651 22.4491 18.4091 22.9236 18.4091 23.4091C18.4091 24.0601 18.1505 24.6844 17.6902 25.1447C17.2299 25.605 16.6055 25.8636 15.9545 25.8636ZM15.9545 22.5909C15.7927 22.5909 15.6345 22.6389 15.5 22.7288C15.3654 22.8187 15.2606 22.9465 15.1986 23.096C15.1367 23.2455 15.1205 23.41 15.1521 23.5687C15.1837 23.7274 15.2616 23.8732 15.376 23.9876C15.4904 24.102 15.6362 24.18 15.7949 24.2115C15.9536 24.2431 16.1181 24.2269 16.2677 24.165C16.4172 24.1031 16.5449 23.9982 16.6348 23.8636C16.7247 23.7291 16.7727 23.5709 16.7727 23.4091C16.7727 23.1921 16.6865 22.984 16.5331 22.8305C16.3797 22.6771 16.1715 22.5909 15.9545 22.5909Z" fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_194_14762">
                                    <rect width="45" height="45" fill="white" transform="translate(0 0.5)"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                    <div className={`text ${settings.enableRewardPointExpiry &&  'unavailable' == ecreFrontend.reward_point_expiry_status && 'unavailable' == settings.rewardPointExpiryAction.value ? 'ecre-opacity-50' : ''}`}>
                        <div className="number ecre-text-violet-600 ecre-text-[16px] ecre-font-semibold ecre-leading-[18px] ecre-mb-[2px]">{ecreFrontend.available_points}</div>
                        <div className="ecre-text-zinc-700 ecre-text-[14px] ecre-font-medium">{translate('available_points')}</div>
                        <div className="ecre-text-zinc-500 ecre-text-[10px] ecre-font-normal">{translate('points_available_use')}</div>
                    </div>
                </li>
                <li className="ecre-flex ecre-gap-2">
                    <div className="text">
                        <div className="number ecre-text-zinc-600 ecre-text-[16px] ecre-font-semibold ecre-leading-[18px] ecre-mb-[2px]">{ecreFrontend.total_applied_points}</div>
                        <div className="ecre-text-zinc-700 ecre-text-[14px] ecre-font-medium">{translate('redeemed_points')}</div>
                        <div className="ecre-text-zinc-500 ecre-text-[10px] ecre-font-normal">{translate('points_redeemed_info')}</div>
                    </div>
                </li>
            </ul>


            { settings.enableRewardPointExpiry && 'available' == ecreFrontend.reward_point_expiry_status && ( 
                <div className="ecre-text-center">
                    <div className="ecre-px-1 ecre-inline-block ecre-ml-auto ecre-mr-auto ecre-py-0.5 ecre-mb-3 ecre-bg-red-50 ecre-rounded ecre-text-[#844848] ecre-text-[14px] ecre-font-normal">The points will be expired on {ecreFrontend.reward_point_expiry}</div>
                </div>
            )}

            { settings.enableRewardPointExpiry && 'expired' == ecreFrontend.reward_point_expiry_status && (  
                <div className="ecre-text-center">
                    <div className="ecre-px-1 ecre-inline-block ecre-ml-auto ecre-mr-auto ecre-py-0.5 ecre-mb-3 ecre-bg-red-50 ecre-rounded ecre-text-[#844848] ecre-text-[12px] ecre-font-normal">{translate('reward_points_have_expired')}</div>
                </div>
            )}

            { settings.enableRewardPointExpiry && 'unavailable' == ecreFrontend.reward_point_expiry_status && (  
                <div className="ecre-text-center">
                    <div className="ecre-px-1 ecre-inline-block ecre-ml-auto ecre-mr-auto ecre-py-0.5 ecre-mb-3 ecre-bg-red-50 ecre-rounded ecre-text-[#844848] ecre-text-[12px] ecre-font-normal">{translate('reward_points_is_unavailable')}</div>
                </div>
            )}

            <div className="ecre-text-zinc-700 ecre-text-[12px] ecre-font-normal ecre-text-center ecre-leading-[15px]">{translate('redeem_during_checkout')} <strong className="ecre-text-[#5257C4] ecre-font-semibold">{currency}{settings.redeemDiscount}</strong> {translate('per_points')} <strong className="ecre-text-[#D857ED] ecre-font-semibold ">{settings.redeemPoint} {translate('points_label')} </strong> </div>
        </div>
    );
}

export default PointBoard;