import React, { useState, useMemo } from "react";
import device, { operatingSystems } from "./utils/device-browser";
import Button from "./components/button";
import Logo from "./components/logo";
import useDeferredUnmount from "./hooks/useDeferredUnmount";
import env from "../env";

export const AddToHomeScreen = () => {
    const isIos = device.os === operatingSystems.iOS
    const isInStandaloneMode = device.isStandalone
    const [isVisible, setIsVisible] = useState(isIos && !isInStandaloneMode)
    const open = useDeferredUnmount({ delay: 650, mounted: isVisible })
    const className = useMemo(() => !isVisible && open ? 'hide-slide' : 'slide-up', [isVisible, open])
    return (
        <>
            {open && isIos && !isInStandaloneMode && (
                <div className={`${className} fixed bottom-0 left-0 w-full max-w-full overflow-hidden faded-div !p-0`} style={styles.banner}>
                    <div className="relative w-full flex items-center justify-center py-3 px-8 flex-col gap-2">
                        <Logo />
                        <h2 className="uppercase text-white py-1 px-2" style={{backgroundColor: 'var(--p)', border: '.1rem solid var(--w)', borderRadius: "var(--radius)", boxShadow: 'var(--shadow)'}}>Install {env.APP_NAME}</h2>
                        <span className="transparent-inner !p-3">
                            Add this app to your home screen for quick access.<br />
                            <span className="flex flex-col items-center justify-center gap-2 whitespace-nowrap"><span>Tap the icon</span>
                            <i className="fas fa-arrow-up-from-bracket text-2xl" style={{color: 'var(--p)'}} /> <span>in your browser menu and then select</span></span>
                            <h3 className="uppercase" style={{color: 'var(--p)'}}>Add to Home Screen</h3>
                        </span>
                        <Button alt className="w-full" onClick={() => setIsVisible(false)} text="Close" icon="fas fa-times" />
                        <Button className="absolute top-0 right-0 rounded-none rounded-bl-md" onClick={() => setIsVisible(false)} icon='fas fa-times' />
                    </div>
                </div>
            )}
        </>
    );
};

const styles = {
    banner: {
        zIndex: 1000,
    }
};

export default AddToHomeScreen;