import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { RosettaPower } from "@/app/components/RosettaPower/RosettaPower";
import { SettingsAlert } from "@/app/components/SettingsAlert/SettingsAlert";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { UpdateAlert } from "@/app/components/UpdateAlert/UpdateAlert";
import { CORE_VERSION } from "@/app/constants";
import { UpdateStatus } from "@/app/providers/UpdateProvider/UpdateProvider";
import { useUpdater } from "@/app/providers/UpdateProvider/useUpdater";
import { APP_VERSION } from "@/app/version";
import { Box, Text } from "@mantine/core";

export function Update() {
    const {updateStatus} = useUpdater();
    
    return (
        <>
            <Breadcrumbs text="Updates"></Breadcrumbs>
            <InternalScreen>
                {(updateStatus != UpdateStatus.NO_UPDATES) && (
                    <SettingsAlert type="error" text="We recommend always using the latest version of the application. You can also update the app using the button in the left menu below the list of dialogs."></SettingsAlert>
                )}
                <Box mt={'sm'}>
                    <UpdateAlert radius={'sm'}></UpdateAlert>
                </Box>
                <SettingsInput.Copy mt={'sm'} hit="Kernel" value={CORE_VERSION}></SettingsInput.Copy>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    If the kernel version is outdated, you need to reinstall the application so that this kernel continues to receive current updates.
                </Text>  
                <SettingsInput.Copy mt={'sm'} hit="Application" value={APP_VERSION}></SettingsInput.Copy>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    App version. We recommend always keeping it up to date to improve visual effects and have the latest features.
                </Text> 
                <RosettaPower mt={'lg'}></RosettaPower>                                   
            </InternalScreen>
        </>

    )
}