import { Navbar, Text } from '@mantine/core'
import * as Icons from 'react-feather';
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { ModalsProvider, openConfirmModal } from '@mantine/modals';
import './DogNavbar.css';
import { deleteProfil } from '../services/PhpApi';
import { notificationError, notificationSuccess } from '../services/Notifications';
import { ResponseT } from '../context/UserContext';

const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, href: string, text: string}) => 
(
  <div className='sidebar-icon group'>
    <>
    <Link to={href}>{icon}</Link>
    <span className='sidebar-tooltip group-hover:scale-100'>
      {text}
    </span>
    </>
  </div>
  
);

const Divider = () => <hr className="sidebar-hr" />;

const openDeleteModal = (qr_id: string | null) =>
    openConfirmModal({
      title: 'Account löschen!',
      centered: true,
      children: (
        <Text size="sm">
          Wirklich Dein Profil löschen? Alle Daten gehen verloren und können nicht 
          wiederhergestellt werden!
        </Text>
      ),
      labels: { confirm: 'Account löschen', cancel: "Behalten, nicht löschen" },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => 
      {
        console.log('Confirmed');
        if(qr_id)
        {
          const data = deleteProfil({qr_id: qr_id}) as ResponseT;
          if(data.success)
          {
              notificationSuccess('Profil gelöscht!');
          }
          else if(!data.success && data.message)
          {
              notificationError(data.message);
          }
          window.location.href = '/dog/';
        }
      }
    });

function DogNavbar({hasUser, qr_id, hidden, onLogout}:
  {hasUser: boolean, qr_id: string | null, hidden: boolean, onLogout: () => void}) 
{
  return (
<>
  <ModalsProvider labels={{ confirm: 'Submit', cancel: 'Cancel' }}>   
    <Navbar className="fixed top-11 left-0 w-16 h-[90%] flex flex-col
    bg-orange-500"
    
        hiddenBreakpoint='sm' 
        hidden={hidden} 
        >
    
      <Navbar.Section grow>
        {!hasUser && 
        <NaveBarIcon icon={<Icons.LogIn size={32}/>} href={'/login'} text={'Login'} />
        }
        {!hasUser && 
        <NaveBarIcon icon={<Icons.UserPlus size={32}/>} href={'/reg'} text={'Register'} />
        }
        {hasUser && 
          <NaveBarIcon icon={<Icons.User size={32}/>} href={'/profil'} text={'Profil'} />
        }
        {!hasUser && 
          <NaveBarIcon icon={<Icons.Lock size={32}/>} href={'/wantnewpw'} text={'Neues Password anfordern'} />
        }
        {hasUser && 
          <NaveBarIcon icon={<Icons.Grid size={32}/>} href={'/qr'} text={'QrCode drucken'} />
        }
      </Navbar.Section>
      <Navbar.Section>
        {hasUser && 
          <NaveBarIcon icon={<Icons.Repeat size={32}/>} href={'/chngpw'} text={'Passwort ändern'} />
        }
      </Navbar.Section>
      <Navbar.Section className='InputForm' >
      {hasUser && 
        <div onClick={(e)=>{onLogout()}}>
          <NaveBarIcon icon={<Icons.LogOut size={32}/>} href={''} text={'Logout'}/>
        </div>
      }
      </Navbar.Section>
      <Divider/>
      <Navbar.Section className='InputForm' >
      {hasUser && 
        <div onClick={() => openDeleteModal(qr_id)}>
          <NaveBarIcon icon={<Icons.UserMinus size={32}/>} href={''} text={'Account löschen'}/>
        </div>
      }
      </Navbar.Section>
      <Divider/>
      <Navbar.Section><Text className='text-xs' component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
    </Navbar>
  </ModalsProvider>
</>  )
}

export default DogNavbar
