"use client";
import { useToken } from "@/hooks/use-token";
import { BadgeCheck, Bomb, TriangleAlert } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

import IvoryList from "@/assets/icons/IvoryLogo.svg";

import { useTranslation } from 'react-i18next';
import { useLanguage } from '@/store/language-context';
import getToken, { clearToken } from '@/utils/get-token';

import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';

const DeleteAccount = () => {
    const { t } = useTranslation();
    const { URL } = useLanguage();
    const naviagte = useNavigate();

    const token = useToken();
    const { toast } = useToast();

    const deleteFnc = async () => {
        try {
            const response = await axios.delete(`${URL}/profile/destroy`, {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            });

            if (response.status !== 200) {
                throw new Error(t('custom.err'));
            } else {
                toast({
                    variant: 'success',
                    title: (
                        <div className='flex items-center gap-1'>
                            <span>
                                <BadgeCheck />
                            </span>
                            <span>
                                {t('profile.done-delete')}
                            </span>
                        </div>
                    ),
                    description: t('custom.done')
                });
            }

            clearToken();
            naviagte('/');
        } catch (error) {
            toast({
                variant: 'destructive',
                title: (
                    <div className='flex items-center gap-1'>
                        <span>
                            <TriangleAlert />
                        </span>
                        <span>
                            {t('custom.err-title')}
                        </span>
                    </div>
                ),
                description: t('custom.err')
            });
        }
    };

    return (
        <div className="grid place-items-center h-full p-2">
            <div className='grid place-items-center'>
                <p className="flex items-center justify-center gap-2 text-gray-500 text-xl">
                    <img src={IvoryList} alt="list" className="me-2" />
                    {t('profile.delete-text')}
                </p>
                <Dialog>
                    <DialogTrigger asChild>
                        <Button variant='outline' className='bg-primary-tw !text-white h-8 mt-4 text-base'>
                            <Bomb size={19} />
                            {t('profile.delete-text-2')}
                        </Button>
                    </DialogTrigger>
                    <DialogContent className='!bg-gray-50 rounded-lg z-[10000000000000000]'>
                        <DialogHeader>
                            <DialogTitle className='text-primary-tw text-xl'>{t('profile.delete-title')}</DialogTitle>
                            <DialogDescription className='text-gray-700'>{t('profile.delete-p')}</DialogDescription>
                        </DialogHeader>
                        <DialogFooter className='max-lg:gap-2 mt-2'>
                            <DialogClose asChild>
                                <Button variant="outline" className='bg-secondary-tw text-white text-base'>
                                    {t('custom.cancel')}
                                </Button>
                            </DialogClose>
                            <Button
                                variant="destructive"
                                className='text-white text-base'
                                onClick={deleteFnc}
                            >
                                {t('profile.delete-action')}
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            </div>
        </div>
    );
};
export default DeleteAccount;