import {
  IconArrowForward,
  IconFileInvoice,
  IconFolder,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { appearFromBottom } from '@material-hu/utils/animations';

import ListItem from '@material-hu/components/design-system/List/components/ListItem';

import { type KnowledgeBaseItem, KnowledgeBaseItemType } from '../../types';

type MoveItemDirectoryProps = {
  items: KnowledgeBaseItem[];
  handleNavigateInto: (path: string) => void;
  itemPath: string;
};

const MoveItemDirectory = ({
  items,
  handleNavigateInto,
  itemPath,
}: MoveItemDirectoryProps) => {
  return (
    <Stack sx={{ gap: 3, animation: `${appearFromBottom} 0.5s ease-in-out` }}>
      {items.map(listItem => {
        const isFolderItem = listItem.type === KnowledgeBaseItemType.FOLDER;

        const onClick = isFolderItem
          ? () => handleNavigateInto(listItem.path)
          : undefined;

        const isSameAsCurrent = listItem.path === itemPath;

        return (
          <ListItem
            key={`directory-item-${listItem.path}`}
            text={{ title: listItem.name, withEllipsis: true }}
            avatar={{ Icon: isFolderItem ? IconFolder : IconFileInvoice }}
            onClick={onClick}
            disabled={isSameAsCurrent}
            slotProps={{
              container: {
                sx: {
                  p: 0,
                  '&:hover': { backgroundColor: 'transparent' },
                  opacity: !isFolderItem ? 0.5 : 1,
                },
              },
            }}
            sideContent={isFolderItem ? <IconArrowForward /> : undefined}
          />
        );
      })}
    </Stack>
  );
};

export default MoveItemDirectory;