import { useNavigate } from 'react-router-dom'
import {
  activeDevices,
  changePassword,
  logoutIcon,
  profile,
} from '../../../../assets/images'

import logout from '../../../../utils/logout'
import ActiveDevices from '../../../ActiveDevices'
import ChangePassword from '../../../ChangePassword'
import DropDownButton from '../../../DropDownButton/DropDownButton'
import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
import MyProfile from '../../../MyProfile/MyProfile'
import { StyledAvatar } from '../styles'

const getStartingLetters = (text: string) => {
  if (!text) return ''
  return text
    .split(' ')
    ?.map((w) => w[0])
    ?.join('')
}

export default function UserBox({
  fullName,
  actions,
  customActions = [],
  profileUrl,
  profileSx = {},
}: {
  fullName: string
  actions: IMenuItemProps[] | []
  customActions?: IMenuItemProps[] | []
  profileUrl?: string
  profileSx?: any
}) {
  const navigate = useNavigate()
  return (
    <DropDownButton
      anchor={({ open }) => (
        <StyledAvatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
          {getStartingLetters(fullName)}
        </StyledAvatar>
      )}
      menu={
        customActions?.length
          ? customActions
          : [
              ...actions,
              {
                label: 'My Profile',
                actionType: 'dialog',
                icon: (
                  <img style={{ marginRight: '10px' }} src={profile.default} />
                ),
                content: ({ close }) => <MyProfile close={close} />,
                dialogProps: {
                  maxWidth: 'xl',
                  PaperProps: {
                    sx: {
                      padding: 0,
                    },
                  },
                },
              },
              {
                label: 'Active Devices',
                actionType: 'dialog',
                icon: (
                  <img
                    style={{ marginRight: '10px' }}
                    src={activeDevices.default}
                  />
                ),
                content: ({ close }) => <ActiveDevices close={close} />,
                contentTitle: 'Active Devices',
                dialogProps: {
                  maxWidth: 'lg',
                  PaperProps: {
                    sx: {
                      padding: 0,
                    },
                  },
                },
              },
              {
                label: 'Change Password',
                actionType: 'dialog',
                icon: (
                  <img
                    style={{ marginRight: '10px' }}
                    src={changePassword.default}
                  />
                ),
                content: ({ close }) => <ChangePassword close={close} />,
                contentTitle: 'Change Password',
              },
              {
                label: 'Logout',
                icon: (
                  <img
                    style={{ marginRight: '10px' }}
                    src={logoutIcon.default}
                  />
                ),
                onClick: logout,
              },
            ]
      }
      menuProps={{
        PaperProps: { sx: { top: '56px !important' } },
      }}
    />
  )
}
