import { useTranslation } from 'react-i18next';

import { useSidebarColors } from '@composed-components/LibrariesSidebar/hooks/useGetSidebarColors';
import { getLeftSpacing } from '@composed-components/LibrariesSidebar/utils';
import Button from '@design-system/Buttons/Button';
import Stack from '@mui/material/Stack';
import { IconPlus } from '@tabler/icons-react';

type SidebarAddItemButtonProps = {
  onAdd: () => void;
  onAddMouseEnter?: () => void;
  depth?: number;
  hasChildren?: boolean;
};

export const SidebarAddItemButton = ({
  onAdd,
  onAddMouseEnter,
  depth = 0,
  hasChildren,
}: SidebarAddItemButtonProps) => {
  const colors = useSidebarColors();
  const { t } = useTranslation('material_hu_only');

  if (!onAdd) return null;

  const getBackgroundColor = () => {
    if (hasChildren || depth > 0) return colors.MAIN_LIGHT_GREY;
    return colors.ROW_HOVER;
  };

  return (
    <Stack
      sx={{
        py: 1,
        pr: 2,
        alignItems: 'start',
        backgroundColor: getBackgroundColor(),
      }}
    >
      <Button
        onMouseEnter={onAddMouseEnter}
        className="sidebar-add-item-button"
        onClick={onAdd}
        variant="tertiary"
        startIcon={<IconPlus />}
        sx={{ ml: getLeftSpacing(depth + 1) }}
      >
        {t('libraries_sidebar.add_article')}
      </Button>
    </Stack>
  );
};
