import { Fragment, memo } from 'react';
import clsx from 'clsx';
import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { Avatar } from '../avatar';
import { CustomIcon } from '../custom-icon';
import { Link } from '../@navigation/link';
import { Button } from '../button';
import type { UserControlsProps } from './types';
import { trimSpaces } from '../../utils';
import { ASSETS_URL } from '../../consts/common';
import createClasses from './styles';

interface NotificationProps {
  notificationBadgeProps: UserControlsProps['notificationBadgeProps'];
  handleNotificationClick?: UserControlsProps['handleNotificationClick'];
  styles: ReturnType<typeof createClasses>;
}

const Notification = memo((props: NotificationProps) => {
  const { notificationBadgeProps, styles } = props;

  return (
    <Badge
      {...notificationBadgeProps}
      classes={{
        badge: styles.badge,
        ...notificationBadgeProps?.classes
      }}
    >
      <CustomIcon
        color="inherit"
        src={`${ASSETS_URL}/icons2/icon_alert.svg`}
        className={styles.icon}
      />
    </Badge>
  );
});

const UserControls = (props: UserControlsProps) => {
  const {
    name,
    userRole,
    avatarProps,
    notificationBadgeProps,
    showDividers,
    showIconSearch,
    showIconSettings,
    showIconNotification,
    iconButtons,
    classes,
    isNotificationOpen,
    userArrowCallback,
    handleNotificationClick
  } = props;
  const styles = createClasses({
    badgeContent: Number(notificationBadgeProps?.badgeContent),
    userArrowCallback: !!userArrowCallback,
    isNotificationOpen: isNotificationOpen
  });

  return (
    <Grid className={clsx(styles.container, classes?.container)}>
      <Grid container className={styles.iconsContainer} data-testid="iconsContainer">
        {iconButtons?.map((iconButton, i) => {
          const { href = '', icon, title, onClick, linkProps = {}, testqa } = iconButton;

          const testIdName = testqa ? testqa : trimSpaces(title) ? trimSpaces(title) : i;

          return (
            <Fragment key={`key_${title}`}>
              <Grid item>
                <Link href={href} {...linkProps} data-testid={`link-${testIdName}`}>
                  <Button
                    size="small"
                    clickArea={false}
                    onClick={onClick}
                    data-testid={`button-${testIdName}`}
                    startIconUrl={icon?.src}
                  >
                    {title}
                  </Button>
                </Link>
              </Grid>
              {showDividers && (
                <Divider orientation="vertical" flexItem className={styles.divider} />
              )}
            </Fragment>
          );
        })}

        {showIconSearch && (
          <>
            <Grid item>
              <IconButton size="small" data-testid="button-search">
                <CustomIcon size="small" src={`${ASSETS_URL}/icons/icon_search.svg`} />
              </IconButton>
            </Grid>
            {showDividers && <Divider orientation="vertical" flexItem className={styles.divider} />}
          </>
        )}

        {showIconNotification && (
          <>
            <Grid item>
              {handleNotificationClick ? (
                <IconButton
                  size="small"
                  onClick={handleNotificationClick}
                  className={styles.notificationButton}
                  data-testid="button-notification"
                >
                  <Notification notificationBadgeProps={notificationBadgeProps} styles={styles} />
                </IconButton>
              ) : (
                <Link href="/notifications" data-testid="link-notification">
                  <Notification notificationBadgeProps={notificationBadgeProps} styles={styles} />
                </Link>
              )}
            </Grid>
            {showDividers && <Divider orientation="vertical" flexItem className={styles.divider} />}
          </>
        )}

        {showIconSettings && (
          <>
            <Grid item>
              <Link href="/settings/users" data-testid="link-settings">
                <CustomIcon
                  size="small"
                  src={`${ASSETS_URL}/icons2/icon_settingsIn.svg`}
                  className={styles.icon}
                />
              </Link>
            </Grid>
            {showDividers && <Divider orientation="vertical" flexItem className={styles.divider} />}
          </>
        )}
      </Grid>

      <Grid
        className={styles.userInfo}
        data-testid="button-userInfo"
        onClick={userArrowCallback}
        role="button"
      >
        <Box pr={showDividers ? 1 : 2} pl={showDividers ? 0 : 3}>
          <Avatar {...avatarProps} className={classes?.avatar} />
        </Box>
        <Grid container direction="column">
          <Grid container>
            <Grid item>
              <Typography variant="h5" component="span" color="textPrimary" className={styles.name}>
                {name}
              </Typography>
            </Grid>
            <Grid container item alignItems="center" xs>
              <CustomIcon
                size="small"
                src={`${ASSETS_URL}/icons2/icon_arrow.svg`}
                className={styles.arrow}
              />
            </Grid>
          </Grid>
          <Typography className={styles.userRole} component="span">
            {userRole}
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
};

UserControls.defaultProps = {
  avatarProps: {
    size: 'medium',
    backgroundColor: '#ffffff',
    emailVerified: true,
    src: '',
    initials: ''
  },
  showIconSearch: true,
  showIconSettings: true,
  showIconNotification: true
};

const m = memo(UserControls);
export { m as UserControls };