import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { get } from 'lodash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useRouteMatch, useHistory } from 'react-router-dom';
import { Text } from '@buffetjs/core';

import { PopUpWarning, request, useGlobalContext } from 'strapi-helper-plugin';

import pluginId from '../../pluginId';
import useDataManager from '../../hooks/useDataManager';
import useEditView from '../../hooks/useEditView';
import { DeleteButton } from './components';
import { getTrad } from '../../utils';

const getRequestUrl = path => `/${pluginId}/explorer/${path}`;

const DeleteLink = () => {
  const {
    initialData,
    isCreatingEntry,
    isSingleType,
    redirectToPreviousPage,
    slug,
    clearData,
  } = useDataManager();
  const {
    allowedActions: { canDelete },
  } = useEditView();
  const {
    params: { contentType },
  } = useRouteMatch('/plugins/content-manager/:contentType');
  const { push } = useHistory();

  const [showWarningDelete, setWarningDelete] = useState(false);
  const [didDeleteEntry, setDidDeleteEntry] = useState(false);
  const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
  const { formatMessage } = useIntl();
  const { emitEvent } = useGlobalContext();

  const toggleWarningDelete = () => setWarningDelete(prevState => !prevState);

  const handleConfirmDelete = async () => {
    try {
      // Show the loading state
      setIsModalConfirmButtonLoading(true);

      emitEvent('willDeleteEntry');

      await request(getRequestUrl(`${slug}/${initialData.id}`), {
        method: 'DELETE',
      });

      strapi.notification.success(`${pluginId}.success.record.delete`);

      emitEvent('didDeleteEntry');

      // This is used to perform action after the modal is closed
      // so the transitions are smoother
      // Actions will be performed in the handleClosed function
      setDidDeleteEntry(true);
    } catch (err) {
      emitEvent('didNotDeleteEntry', { error: err });
      const errorMessage = get(
        err,
        'response.payload.message',
        formatMessage({ id: `${pluginId}.error.record.delete` })
      );
      strapi.notification.error(errorMessage);
    } finally {
      setIsModalConfirmButtonLoading(false);
      toggleWarningDelete();
      push(`/plugins/${pluginId}/${contentType}/${slug}`);
    }
  };

  const handleClosed = () => {
    if (didDeleteEntry) {
      if (!isSingleType) {
        redirectToPreviousPage();
      } else {
        clearData();
      }
    }

    setDidDeleteEntry(false);
  };

  if (isCreatingEntry || !canDelete) {
    return null;
  }

  return (
    <>
      <li>
        <DeleteButton onClick={toggleWarningDelete}>
          <FontAwesomeIcon icon="trash-alt" />
          <Text lineHeight="22px" color="lightOrange">
            {formatMessage({
              id: getTrad('containers.Edit.delete-entry'),
            })}
          </Text>
        </DeleteButton>
      </li>
      <PopUpWarning
        isOpen={showWarningDelete}
        toggleModal={toggleWarningDelete}
        content={{
          title: `${pluginId}.popUpWarning.title`,
          message: `${pluginId}.popUpWarning.bodyMessage.contentType.delete`,
          cancel: `${pluginId}.popUpWarning.button.cancel`,
          confirm: `${pluginId}.popUpWarning.button.confirm`,
        }}
        popUpWarningType="danger"
        onConfirm={handleConfirmDelete}
        onClosed={handleClosed}
        isConfirmButtonLoading={isModalConfirmButtonLoading}
      />
    </>
  );
};

export default DeleteLink;

@@ -269,17 +269,16 @@
 /core';%0A
-%0A
 import %7B
@@ -349,17 +349,16 @@
 lugin';%0A
-%0A
 import p
@@ -681,20 +681,16 @@
  const %7B
-%0A   
  initial
@@ -694,20 +694,16 @@
 ialData,
-%0A   
  isCreat
@@ -711,20 +711,16 @@
 ngEntry,
-%0A   
  isSingl
@@ -729,50 +729,14 @@
 ype,
-%0A    redirectToPreviousPage,%0A   
  slug,
-%0A   
  cle
@@ -741,19 +741,16 @@
 learData
-,%0A 
  %7D = use
@@ -2298,73 +2298,14 @@
 ();%0A
-      push(%60/plugins/$%7BpluginId%7D/$%7BcontentType%7D/$%7Bslug%7D%60);%0A
     %7D%0A
+
   %7D;
@@ -2333,24 +2333,55 @@
 d = () =%3E %7B%0A
+    setDidDeleteEntry(false);%0A%0A
     if (didD
@@ -2433,31 +2433,58 @@
     
-redirectToPreviousPage(
+push(%60/plugins/$%7BpluginId%7D/$%7BcontentType%7D/$%7Bslug%7D%60
 );%0A 
@@ -2530,44 +2530,13 @@
   %7D%0A
+
     %7D
-%0A%0A    setDidDeleteEntry(false);
 %0A  %7D

Fix delete entry