import { useParams } from 'react-router';

import { IconCopy } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography, { TypographyProps } from '@material-hu/mui/Typography';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import { MenuListProps as HuMenuListProps } from '@material-hu/components/composed-components/MenuList/types';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import useCopyUrl from 'src/hooks/useCopyUrl';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DocumentListContainerProps = {
  title: string;
  children: React.ReactNode;
  typographyVariant?: TypographyProps['variant'];
  showOptions?: boolean;
};

export const DocumentListContainer = (props: DocumentListContainerProps) => {
  const { title, children, typographyVariant, showOptions = false } = props;
  const { enqueueSnackbar } = useHuSnackbar();
  const { copyUrlToClipboard } = useCopyUrl();
  const { t } = useLokaliseTranslation('documents');
  const { folderId } = useParams();
  const isFolderRoute = !!folderId;
  const showMenuOptions = showOptions && isFolderRoute;

  const handleCopyUrl = () => {
    copyUrlToClipboard();
    enqueueSnackbar({
      title: t('general:url_copied'),
      variant: 'info',
    });
  };

  const options = [
    {
      Icon: IconCopy,
      title: t('copy_link_folder'),
      onClick: handleCopyUrl,
    },
  ] as HuMenuListProps['options'];

  return (
    <Stack sx={{ gap: 2, py: 2 }}>
      <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Typography
          fontWeight="fontWeightSemiBold"
          variant={typographyVariant ?? 'globalL'}
        >
          {title}
        </Typography>
        {showMenuOptions && <HuMenuList options={options} />}
      </Stack>
      <HuCardContainer
        sx={{ width: '100%', '& .MuiCardContent-root': { pb: 0, pt: 0 } }}
      >
        {children}
      </HuCardContainer>
    </Stack>
  );
};

export default DocumentListContainer;
