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

interface UpdateAlertProps {
    radius?: MantineRadius;
}

/**
 * Компонент для отображения кнопки обновлений если оно доступно, и прогресса загрузки если обновление уже скачивается
 */
export function UpdateAlert(props : UpdateAlertProps) {
    const radius = props.radius || 0;
    const {
        kernelUpdateUrl,
        downloadProgress,
        updateStatus,
        downloadLastApplicationUpdate,
        restartAppForUpdateApply,
        checkForUpdates
    } = useUpdater(); 

    useEffect(() => {
        checkForUpdates();
    }, []);


    return (
       <>
            {updateStatus == UpdateStatus.KERNEL_UPDATE_NEED && <>
                <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>
            </>}
            {updateStatus == UpdateStatus.APP_UPDATE_AVAILABLE && <>
                <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>
            </>}
       </>
    );

}