import {
    useEffect,
    useState,
} from 'react';

import {
    CloudOff,
    RefreshCcw,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import {
    MobileApp,
    MobileBlock,
    MobileButton,
    MobileLink,
    MobileNavbar,
    MobilePage,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';
import { EventEmitter } from '@/utils/event';

const ErrorConnectSplash = () => {

    const { isMobile, isIOS } = useAppConfigStore();

    const [showSplash, setShowSplash] = useState(false);

    useEffect(() => {
        EventEmitter.subscribe("internetError", () => {


            setShowSplash(true);
        });
    }, []);


    if (!showSplash) return null;

    if (isMobile)

        return <MobileApp

            className={"k-color-brand-red"}

            theme={isIOS ? 'ios' : 'material'}
        >

            <MobilePage>

                <MobileNavbar
                    title={Lang.key("internet_error_navbar_title")}
                    right={<MobileLink
                        onClick={() => {
                            window.location.reload();
                        }}
                    >
                        <RefreshCcw className='mr-3' />
                    </MobileLink>}

                />
                <MobileBlock
                    outline
                    className='flex flex-col items-center justify-center'


                >
                    <div className='text-xl font-medium'>{Lang.key("internet_error_card_header")}</div>
                    <CloudOff
                        className='animate-pulse my-4'
                        size={60} />
                    <div

                    >{Lang.key("internet_error_card_description")}</div>

                </MobileBlock>
                <MobileBlock>
                    <MobileButton
                        onClick={() => {
                            window.location.reload();
                        }}
                    >
                        <RefreshCcw className='mr-3' />  {Lang.key("internet_error_card_button")}
                    </MobileButton>
                </MobileBlock>


            </MobilePage>

        </MobileApp>


    return <div className='w-screen h-screen flex items-center justify-center'>

        <Empty>
            <EmptyHeader>
                <EmptyMedia variant="icon">
                    <CloudOff size={60} />
                </EmptyMedia>
                <EmptyTitle>{Lang.key("internet_error_card_header")}</EmptyTitle>
                <EmptyDescription>{Lang.key("internet_error_card_description")}</EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button onClick={() => {
                    window.location.reload();
                }}><RefreshCcw /> {Lang.key("internet_error_card_button")}</Button>
            </EmptyContent>
        </Empty>

    </div>

}

export default ErrorConnectSplash;