import { memo, useState } from 'react';
import clsx from 'clsx';
import InfiniteScroll from 'react-infinite-scroll-component';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Tooltip from '@mui/material/Tooltip';
import { Avatar } from '../avatar';
import { Button } from '../button';
import { CustomIcon } from '../custom-icon';
import type { InfoListProps } from './types';
import { ASSETS_URL } from '../../consts/common';
import createClasses from './styles';

export const InfoList = memo((props: InfoListProps) => {
  const {
    handleListItemClick,
    tabsButtons,
    listItems,
    onClose,
    tabsProps,
    tabs,
    title,
    handleStatusDotClick,
    infiniteScrollProps,
    markAsReadBtnTxt = 'Mark As Read',
    hideBtnTxt = 'Hide',
    hideClose = false
  } = props;

  const hover = (id?: string) => {
    setHoverId(id);
  };

  const classes = createClasses();
  const [hoverId, setHoverId] = useState<string>();

  const [value, setValue] = useState(0);

  const handleChange = (newValue: number, event?: React.SyntheticEvent) => {
    setValue(newValue);
  };

  const filterdList = value === 1 ? listItems.filter(item => item.isActive === true) : listItems;

  return (
    <Grid className={classes.container} container direction="column">
      <Grid container justifyContent="space-between" className={classes.header}>
        <Typography variant="h2" data-testid="title" className={classes.title}>
          {title}
        </Typography>
        {!hideClose && (
          <CustomIcon
            data-testid="closeIcon"
            customSize={24}
            onClick={onClose}
            className={classes.closeIcon}
            src={`${ASSETS_URL}/icons2/icon_close.svg`}
          />
        )}
      </Grid>
      <Grid container justifyContent="space-between">
        <Tabs value={value} {...tabsProps}>
          {tabs.map((tab, i) => (
            <Tab
              onClick={() => {
                handleChange(tab?.value);
              }}
              data-testid={`tab_${i}`}
              key={tab.label?.toString()}
              {...tab}
            />
          ))}
        </Tabs>
        <Grid container item xs className={classes.tabsButtonContainer}>
          {tabsButtons.map(button => (
            <Button key={button?.children?.toString()} variant="text" size="small" {...button} />
          ))}
        </Grid>
      </Grid>

      <InfiniteScroll {...infiniteScrollProps}>
        <ul className={classes.list}>
          {filterdList.map((item, i) => {
            const { avatarProps, description, text, title, id, isActive, statusTooltipProps } =
              item;
            return (
              <Grid
                onMouseOver={() => hover(id)}
                onMouseLeave={() => hover()}
                key={id}
                container
                direction="column"
                className={clsx(isActive && classes.activeItem, classes.notifContainer)}
                onClick={isActive ? handleListItemClick(id) : undefined}
                component="li"
                data-testid={`listItem_${i}`}
                role={isActive ? 'button' : undefined}
                tabIndex={isActive ? 0 : undefined}
              >
                <Grid container alignItems="center">
                  <Grid container item xs>
                    <Avatar data-testid={`listItem_avatar_${i}`} size="small" {...avatarProps} />
                    <Typography className={classes.itemTitle}>{title}</Typography>
                  </Grid>
                  <Tooltip {...statusTooltipProps}>
                    <div
                      data-testid={`statusDot_${i}`}
                      tabIndex={!isActive ? 0 : undefined}
                      role={isActive ? undefined : 'button'}
                      onClick={isActive ? undefined : handleStatusDotClick(id)}
                      className={clsx(
                        classes.statusDot,
                        classes[isActive ? 'statusDotActive' : 'statusDotInActive']
                      )}
                    />
                  </Tooltip>
                </Grid>
                <Typography variant="body2" className={classes.itemText}>
                  {text}
                </Typography>
                <Grid container alignItems="center" className={classes.buttonContainer}>
                  <Typography className={classes.itemDescription}>{description}</Typography>
                  {id === hoverId && (
                    <Grid className={classes.actionButton}>
                      <Button
                        classes={{
                          root: classes.hideButton
                        }}
                        onBtnClick={handleListItemClick(id)}
                        clickArea={false}
                        customSize={12}
                        color="primary"
                        size="small"
                        startIconUrl={`${ASSETS_URL}/icons/icon_approve.svg`}
                      >
                        {markAsReadBtnTxt}
                      </Button>
                      <Button
                        classes={{
                          root: classes.hideButton
                        }}
                        onBtnClick={handleStatusDotClick(id)}
                        clickArea={false}
                        customSize={12}
                        color="primary"
                        size="small"
                        startIconUrl={`${ASSETS_URL}/icons2/icon_hide.svg`}
                      >
                        {hideBtnTxt}
                      </Button>
                    </Grid>
                  )}
                </Grid>
              </Grid>
            );
          })}
        </ul>
      </InfiniteScroll>
    </Grid>
  );
});