import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import { librariesRoutes } from '../../routes';
import { type Article } from '../../types';
import { useArticleId } from '../useArticleId';
import { useArticleInformation } from '../useArticleInformation';
import { useEditPermissionsDrawer } from '../useEditPermissionsDrawer';

export const useSharePermissionsActions = (article: Article) => {
  const { rootId, childId } = useArticleId();
  const [open, setOpen] = useState(false);

  const { t } = useLokaliseTranslation('libraries');
  const navigate = useNavigate();

  const { canCreateArticle } = useArticleInformation(article);

  const { editPermissionsDrawer, showEditPermissionsDrawer } =
    useEditPermissionsDrawer(article);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleEditPermissions = () => {
    showEditPermissionsDrawer(true);
    handleClose();
  };

  const handleViewPermissions = () => {
    if (!rootId) return;
    navigate(librariesRoutes.segmentation(rootId, childId));
  };

  const options = [
    {
      key: 'view-permissions',
      title: t('general:permissions.view.title'),
      onClick: handleViewPermissions,
    },
    {
      key: 'edit-permissions',
      title: t('general:permissions.edit.title'),
      onClick: handleEditPermissions,
    },
  ];

  return {
    actions: [
      {
        when: canCreateArticle,
        action: {
          key: 'article-share',
          dropdown: true,
          hasIcon: false,
          label: t('general:share'),
          open,
          onOpen: handleOpen,
          onClose: handleClose,
          buttonProps: {
            variant: 'primary',
          },
          children: (
            <List>
              {options.map(({ key, onClick, title }) => (
                <ListItem
                  key={key}
                  onClick={onClick}
                  text={{ title }}
                />
              ))}
            </List>
          ),
        },
      },
    ],
    components: <>{editPermissionsDrawer}</>,
  };
};