import React, { useEffect } from 'react'
import './ErrorPage.scss'
import {Icon, LinkAria} from '$core-components'
import {getVariableValue} from '$ustoreinternal/services/cssVariables'
import { t } from '$themelocalization'
import urlGenerator from '$ustoreinternal/services/urlGenerator'
import location from '$ustoreinternal/services/locationProvider'

const StoreOffline = () => {
    const currentLogo = getVariableValue('--logo-image', require(`$assets/images/logo.png`), true)
    
    useEffect(() => {
        const navigation = performance.getEntriesByType('navigation')[0]
        const isReload = navigation && navigation.type === 'reload'

        if (isReload) {
            const homeUrl = sessionStorage.getItem('storeOffline_homeUrl')
            if (homeUrl) {
                location.href = homeUrl
            } else {
                const generatedHomeUrl = urlGenerator.get({ page: 'home' })
                if (generatedHomeUrl && !generatedHomeUrl.includes('undefined')) {
                    location.href = generatedHomeUrl
                }
            }
        }
    }, [])
    
    return <div className={"ng-error-page-wrapper offline store-offline"}>
        <div className="inner-wrapper">
            <img className="logo" src={currentLogo} alt="logo"/>
            <div className="error-icon">
                <Icon name={'sand_clock.svg'} width="100%x" height="100%"/>
            </div>
            <div className="error-page-main-text">
                <>{t("NGPages.StoreOffline.TitlePartOne")}<br/>{t("NGPages.StoreOffline.TitlePartTwo")}</>
            </div>
            <div className={`error-page-sub-text`}>
                {t("NGPages.StoreOffline.SubText")}
            </div>
            <LinkAria className={'retry'} reloadDocument to={urlGenerator.get({page: 'home'})}>
                <div
                    className="button button-primary truncate action-button">{t("NGPages.StoreOffline.Retry")}</div>
            </LinkAria>
        </div>
    </div>
}

export default StoreOffline
