import { useWatch, useFormContext } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

import { useDrawer } from '@material-hu/hooks/useDrawer';
import { useModal } from '@material-hu/hooks/useModal';
import ChevronLeft from '@material-hu/icons/material/ChevronLeft';
import {
  IconBookmark,
  IconAspectRatioOff,
  IconAspectRatio,
  IconCopy,
  IconBellRinging,
  IconTrash,
} from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import usePermissions from 'src/hooks/usePermissions';
import { CopyTypePath } from 'src/types/deeplinks';
import { KnowledgeLibraryArticle, LibraryStatus } from 'src/types/library';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import CopyLink, {
  copyLinkContainerStyle,
} from 'src/components/CopyLink/CopyLink';

import { librariesRoutes } from '../routes';

import DeleteLibraryModal from './DeleteLibraryModal';
import DisableLibraryModal from './DisableLibraryModal';
import DuplicateLibraryDrawer from './DuplicateLibraryDrawer';
import LibraryMenu from './LibraryMenu';
import NotificationsSettingsDrawer from './NotificationsSettingsDrawer';
import NotifyLibraryModal from './NotifyLibraryModal';
import RemoveCoverPictureModal from './RemoveCoverPictureModal';
import ShareLibrary from './ShareLibrary';
import StatusPill from './StatusPill';

export type HeaderProps = {
  library: KnowledgeLibraryArticle;
};

export const Header = ({ library }: HeaderProps) => {
  const { setValue, control } = useFormContext();

  const showCoverPicture = useWatch({ control, name: 'showCoverPicture' });

  const navigate = useNavigate();
  const theme = useTheme();
  const { t } = useLokaliseTranslation('general');

  const { hasAny: canEdit } = usePermissions([
    UserPermissions.CREATE_KNOWLEDGE_LIBRARIES,
    UserPermissions.EDIT_KNOWLEDGE_LIBRARIES,
  ]);

  const { hasAny: canDelete } = usePermissions([
    UserPermissions.CREATE_KNOWLEDGE_LIBRARIES,
    UserPermissions.DELETE_KNOWLEDGE_LIBRARIES,
  ]);

  const { hasAll: canCreate } = usePermissions([
    UserPermissions.CREATE_KNOWLEDGE_LIBRARIES,
  ]);

  const { modal: deleteLibraryModal, showModal: showDeleteLibraryModal } =
    useModal(DeleteLibraryModal);

  const { modal: disableLibraryModal, showModal: showDisableLibraryModal } =
    useModal(DisableLibraryModal);

  const {
    modal: removeCoverPictureModal,
    showModal: showRemoveCoverPictureModal,
  } = useModal(RemoveCoverPictureModal);

  const { showModal: showNotifyLibraryModal, modal: notifyLibraryModal } =
    useModal(NotifyLibraryModal, { maxWidth: 'sm', fullWidth: true });

  const {
    showDrawer: showDuplicateLibraryDrawer,
    drawer: duplicateLibraryDrawer,
  } = useDrawer(DuplicateLibraryDrawer, {
    title: t('duplicate'),
  });

  const {
    showDrawer: showNotificationsSettingsDrawer,
    drawer: notificationsSettingsDrawer,
  } = useDrawer(NotificationsSettingsDrawer, {
    title: t('notification.notify.changes.title'),
  });

  const handleBack = () =>
    library.parentId
      ? navigate(librariesRoutes.library(library.parentId))
      : navigate(librariesRoutes.base());

  const handleEnable = () => showNotifyLibraryModal({ library });

  const handleDisable = () => showDisableLibraryModal({ library });

  const handleRemoveCoverPicture = () => {
    library.coverPicture
      ? showRemoveCoverPictureModal({
          library,
          onSuccess: () => setValue('showCoverPicture', false),
        })
      : setValue('showCoverPicture', false);
  };

  const handleAddCoverPicture = () => setValue('showCoverPicture', true);

  const handleDuplicate = () => showDuplicateLibraryDrawer({ library });

  const handleNotifications = () =>
    showNotificationsSettingsDrawer({ library });

  const handleDelete = () => showDeleteLibraryModal({ library });

  const handleReport = () => navigate(librariesRoutes.report(library.id));

  const options = [
    ...insertIf(library.status === LibraryStatus.DISABLED && canEdit, {
      id: 'enable-status',
      title: t('activate'),
      description: t('deactivate_anytime'),
      onClick: handleEnable,
      Icon: IconBookmark,
    }),
    ...insertIf(library.status === LibraryStatus.ENABLED && canEdit, {
      id: 'disable-status',
      title: t('deactivate'),
      description: t('activate_anytime'),
      onClick: handleDisable,
      Icon: IconBookmark,
    }),
    ...insertIf(showCoverPicture && canEdit, {
      id: 'remove-cover-picture',
      title: t('cover_picture.delete.title'),
      onClick: handleRemoveCoverPicture,
      Icon: IconAspectRatioOff,
    }),
    ...insertIf(!showCoverPicture && canEdit, {
      id: 'add-cover-picture',
      title: t('cover_picture.add.title'),
      onClick: handleAddCoverPicture,
      Icon: IconAspectRatio,
    }),
    ...insertIf(canCreate, {
      id: 'duplicate',
      title: t('duplicate'),
      onClick: handleDuplicate,
      Icon: IconCopy,
    }),
    ...insertIf(canEdit, {
      id: 'notifications',
      title: t('notification.manage'),
      onClick: handleNotifications,
      Icon: IconBellRinging,
    }),
    ...insertIf(canDelete, {
      id: 'delete',
      title: t('delete'),
      onClick: handleDelete,
      Icon: IconTrash,
    }),
  ];

  return (
    <>
      {deleteLibraryModal}
      {disableLibraryModal}
      {removeCoverPictureModal}
      {notifyLibraryModal}
      {duplicateLibraryDrawer}
      {notificationsSettingsDrawer}
      <Stack
        sx={{
          width: '100%',
          backgroundColor: theme.palette.hugoBackground?.neutralBgTerciary,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 1,
          py: 1.5,
          px: 3,
          ...copyLinkContainerStyle,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'center',
            gap: 2,
          }}
        >
          <IconButton
            onClick={handleBack}
            aria-label={t('back')}
          >
            <ChevronLeft />
          </IconButton>
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {library.title}
          </Typography>
          <StatusPill status={library.status} />
          <CopyLink
            type={CopyTypePath.LIBRARY}
            id={library.id}
          />
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'flex-end',
            alignItems: 'center',
            gap: 2,
          }}
        >
          {canCreate && <ShareLibrary library={library} />}
          {canCreate && (
            <Button
              variant="secondary"
              onClick={handleReport}
            >
              {t('report.view')}
            </Button>
          )}
          <LibraryMenu options={options} />
        </Stack>
      </Stack>
    </>
  );
};

export default Header;