import { Button, MantineRadius } from "@mantine/core";
import { IconRefresh } from "@tabler/icons-react";
import { AnimatedRoundedProgress } from "../AnimatedRoundedProgress/AnimatedRoundedProgress";
import { UpdateStatus, useUpdater } from "@/app/hooks/useUpdater";

interface UpdateAlertProps {
    radius?: MantineRadius;
}

export function UpdateAlert(props : UpdateAlertProps) {
    const radius = props.radius || 0;
    const {
        appUpdateUrl,
        kernelUpdateUrl,
        downloadProgress,
        updateStatus,
        kernelOutdatedForNextAppUpdates,
        downloadLastApplicationUpdate,
        restartAppForUpdateApply,
    } = useUpdater(); 


    return (
       <>
            {updateStatus == UpdateStatus.IDLE && <>
                {kernelOutdatedForNextAppUpdates && <>
                    <Button h={45} leftSection={
                        <IconRefresh size={15}/>
                    } onClick={() => {
                        window.shell.openExternal(kernelUpdateUrl);
                    }} fullWidth variant={'gradient'} gradient={{ from: 'red', to: 'orange', deg: 233 }} radius={radius}>
                        Kernel update required
                    </Button>
                </>}   
                {!kernelOutdatedForNextAppUpdates && appUpdateUrl != "" && <>
                    <Button h={45} onClick={downloadLastApplicationUpdate} leftSection={
                        <IconRefresh size={15}/>
                    } fullWidth variant={'gradient'} gradient={{ from: 'blue', to: 'green', deg: 233 }} radius={radius}>
                        New version available
                    </Button>
                </>}             
            </>}
            {updateStatus == UpdateStatus.DOWNLOADING && <>
                <Button h={45} leftSection={
                    <AnimatedRoundedProgress value={downloadProgress} />
                } fullWidth variant={'gradient'} gradient={{ from: 'blue', to: 'green', deg: 233 }} radius={radius}>
                    Downloading... {downloadProgress}%
                </Button>                
            </>}
            {updateStatus == UpdateStatus.COMPILE && <>
                <Button h={45} leftSection={
                    <AnimatedRoundedProgress value={50} />
                } onClick={restartAppForUpdateApply} fullWidth variant={'gradient'} gradient={{ from: 'teal', to: 'lime', deg: 233 }} radius={radius}>
                    Installing...
                </Button>
            </>}
            {updateStatus == UpdateStatus.READY_FOR_RESTART && <>
                <Button h={45} onClick={restartAppForUpdateApply} fullWidth variant={'gradient'} gradient={{ from: 'teal', to: 'lime', deg: 233 }} radius={radius}>
                    Restart to apply update
                </Button>
            </>}
       </>
    );

}