import { useState } from 'react';

import { useModal } from '@material-hu/hooks/useModal';

import HuDropdown from '@material-hu/components/design-system/Dropdown';
import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import type { KnowledgeLibraryArticle } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useEditPermissionsDrawer } from '../hooks/useEditPermissionsDrawer';

import ViewPermissionsModal from './ViewPermissionsModal';

export type ShareLibraryProps = {
  library: KnowledgeLibraryArticle;
};

export const ShareLibrary = ({ library }: ShareLibraryProps) => {
  const [open, setOpen] = useState(false);

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

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

  const { showModal: showViewPermissionsModal, modal: viewPermissionsModal } =
    useModal(
      ViewPermissionsModal,
      { maxWidth: 'md', fullWidth: true },
      { library },
    );

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

  const handleViewPermissions = () => {
    showViewPermissionsModal();
    handleClose();
  };

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

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

  return (
    <>
      {viewPermissionsModal}
      {editPermissionsDrawer}
      <HuDropdown
        open={open}
        onClose={handleClose}
        onOpen={handleOpen}
        label={t('general:share')}
        hasIcon={false}
        buttonProps={{
          variant: 'primary',
        }}
      >
        <HuList>
          {options.map((option, index) => (
            <HuListItem
              key={index}
              onClick={option.onClick}
              text={{
                title: option.label,
              }}
            />
          ))}
        </HuList>
      </HuDropdown>
    </>
  );
};

export default ShareLibrary;