import { AlertTriangleIcon } from 'lucide-react';

import { ProfileAlertType } from '@/api/types';
import {
    Alert,
    AlertDescription,
    AlertTitle,
} from '@/components/ui/alert';
import {
    MobileList,
    MobileListItem,
} from '@/components/ui/mobile';
import useAppConfigStore from '@/stores/appConfig';
import { useMainPage } from '@/stores/mainPage';

const SidebarAlerts = () => {

    const { profile, } = useMainPage();
    const { isMobile } = useAppConfigStore();


    if (!profile?.alerts?.length) {
        return null;
    }



    const onAlertClick = (alert: ProfileAlertType) => {

        if (alert?.navigate == "openLink" && alert?.link) {
            window.open(alert.link, '_blank');
        }

    }

    if (isMobile) {
        return <MobileList outline dividers>
            {profile?.alerts?.map((alert) => (
                <MobileListItem
                    onClick={() => {
                        onAlertClick(alert);
                    }}
                    link
                    //  chevronMaterial={false}
                    chevron
                    subtitle={alert.title}
                    // after="$15"
                    // subtitle="Beatles"
                    text={alert.message}
                    media={
                        <AlertTriangleIcon />
                    }
                />
            ))}
        </MobileList>
    }

    return (<div className="grid w-full max-w-md items-start gap-2 mb-4">

        {profile?.alerts?.map((alert) => (
            <Alert
                onClick={() => {
                    onAlertClick(alert);
                }}
                variant="destructive" className='cursor-pointer active:scale-95 transition-all duration-100' >
                <AlertTriangleIcon />

                <AlertTitle className='text-xs font-bold'>{alert.title}</AlertTitle>
                <AlertDescription className='text-xs'>{alert.message}</AlertDescription>
            </Alert>
        ))}

        {/*  <Alert variant="default" className='cursor-pointer active:scale-95 transition-all duration-100' >
            <AlertTriangleIcon />

            <AlertDescription>This is an alert</AlertDescription>
        </Alert>
        <Alert variant="destructive" className='cursor-pointer active:scale-95 transition-all duration-100' >
            <AlertTriangleIcon />

            <AlertDescription>This is an alert</AlertDescription>

        </Alert>*/}
    </div>
    )
}

export default SidebarAlerts;