import { FC } from 'react';
import { useNavigate } from 'react-router';

import { IconChevronRight } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';

import Stack from '@material-hu/mui/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';

import { fileToIconV2 } from '@material-hu/components/composed-components/files/FileIcon/utils';
import HuBadge from '@material-hu/components/design-system/Badge';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { documentsRoutes } from 'src/pages/dashboard/documents/routes';
import { clearFolderNotifications } from 'src/services/documents';
import { Folder } from 'src/types/documents';

export type FolderItemProps = {
  folder: Folder;
  showDivider: boolean;
};

export const FolderItem: FC<FolderItemProps> = props => {
  const { folder, showDivider } = props;
  const theme = useTheme();

  const navigate = useNavigate();

  const handleClick = async () => {
    await clearFolderNotifications(folder.id);

    navigate(documentsRoutes.folders.detail(folder.id));
  };

  const icon = fileToIconV2(folder, theme);

  return (
    <Stack onClick={handleClick}>
      <HuListItem
        avatar={icon}
        sideContent={
          folder.newDocuments > 0 && (
            <HuBadge
              badgeContent={folder.newDocuments}
              color="primary"
              sx={{
                '& .MuiBadge-badge': {
                  position: 'static',
                  transform: 'none',
                },
              }}
            />
          )
        }
        action={{ Icon: IconChevronRight, onClick: handleClick }}
        text={{ title: folder.name }}
        sx={{
          cursor: 'pointer',
          '& .MuiAvatar-root': { ...icon.colorsSX },
          '& .MuiListItem-root': {
            py: 1.5,
            px: 0,
          },
          '& .MuiButtonBase-root:hover': {
            backgroundColor: 'transparent',
          },
        }}
      />
      {showDivider && <Divider />}
    </Stack>
  );
};

export default FolderItem;
