import { ChangePasswordForm } from '@/components/ra-forms';
import { Key } from '@mui/icons-material';
import { Dialog, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { useTranslate } from 'ra-core';
import { useCallback, useState } from 'react';

function ChangePasswordButton(): JSX.Element {
  const [open, setOpen] = useState(false);
  const handleSuccess = useCallback(() => setOpen(false), [setOpen]);
  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
  const translate = useTranslate();
  return (
    <>
      <ListItemButton onClick={handleOpen}>
        <ListItemIcon>
          <Key />
        </ListItemIcon>
        <ListItemText primary={translate('ra.auth.change_password')} />
      </ListItemButton>
      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
        <ChangePasswordForm onSuccess={handleSuccess} />
      </Dialog>
    </>
  );
}

export { ChangePasswordButton };