import { memo, MouseEventHandler, useCallback, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Dropdown, DropDownProps } from 'antd'
import { UserOutlined } from '@ant-design/icons'

import { getUserLogin, removeUser } from '@utils'
import { ChangePassword } from './ChangePassword'
import { PrivateMenu } from './Private'

import AdminPanel from '@pages/AdminPanel'

type UserMenuProps = Omit<DropDownProps, 'overlay'> & { isAdmin?: boolean }

export const UserMenu = memo<UserMenuProps>(({ isAdmin, ...other }) => {
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)

    const navigate = useNavigate()
    const location = useLocation()

    const onChangePasswordClick: MouseEventHandler = useCallback((e) => {
        setIsModalVisible(true)
        e.preventDefault()
    }, [])

    const onChangePasswordOk = useCallback(() => {
        setIsModalVisible(false)
        navigate('/login', { state: { from: location.pathname }})
    }, [navigate, location])

    return (
        <>
            <Dropdown
                {...other}
                placement={'bottomRight'}
                overlay={(
                    <PrivateMenu mode={'vertical'} style={{ textAlign: 'right' }}>
                        {isAdmin ? (
                            <PrivateMenu.Link visible key={'/'} path={'/'} title={'Вернуться на сайт'} />
                        ) : (
                            <PrivateMenu.Link path={'/admin'} content={AdminPanel} />
                        )}
                        <PrivateMenu.Link visible key={'change_password'} onClick={onChangePasswordClick} title={'Сменить пароль'} />
                        <PrivateMenu.Link visible key={'login'} path={'/login'} onClick={removeUser} title={'Выход'} />
                    </PrivateMenu>
                )}
            >
                <Button icon={<UserOutlined/>}>{getUserLogin()}</Button>
            </Dropdown>
            <ChangePassword
                visible={isModalVisible}
                onOk={onChangePasswordOk}
                onCancel={() => setIsModalVisible(false)}
            />
        </>
    )
})