import { isUndefined } from 'lodash';
import { ChangeEvent, SetStateAction, useState } from 'react';
import { FaTrashAlt } from 'react-icons/fa';
import { IoMdCloseCircle } from 'react-icons/io';

import API from '../../../api';
import { ErrorKind, Repository } from '../../../types';
import alertDispatcher from '../../../utils/alertDispatcher';
import InputField from '../../common/InputField';
import Modal from '../../common/Modal';
import styles from './Modal.module.css';

interface Props {
  repository: Repository;
  organizationName?: string;
  setDeletionModalStatus: (value: SetStateAction<boolean>) => void;
  onSuccess: () => void;
  onAuthError: () => void;
}

const DeletionModal = (props: Props) => {
  const [isDeleting, setIsDeleting] = useState(false);
  const [isValidInput, setIsValidInput] = useState<boolean>(false);

  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setIsValidInput(e.target.value === props.repository.name);
  };

  async function deleteRepository() {
    try {
      setIsDeleting(true);
      await API.deleteRepository(props.repository.name, props.organizationName);
      setIsDeleting(false);
      props.onSuccess();
    } catch (err: any) {
      setIsDeleting(false);
      if (err.kind === ErrorKind.Unauthorized) {
        props.onAuthError();
      } else {
        let errorMessage = 'An error occurred deleting the repository, please try again later.';
        if (!isUndefined(props.organizationName) && err.kind === ErrorKind.Forbidden) {
          errorMessage = 'You do not have permissions to delete the repository from the organization.';
        }
        alertDispatcher.postAlert({
          type: 'danger',
          message: errorMessage,
        });
      }
    }
  }

  return (
    <Modal
      className="d-inline-block"
      closeButton={
        <>
          <button
            className="btn btn-sm btn-outline-secondary text-uppercase"
            onClick={() => props.setDeletionModalStatus(false)}
            aria-label="Cancel"
          >
            <div className="d-flex flex-row align-items-center">
              <IoMdCloseCircle className="me-2" />
              <span>Cancel</span>
            </div>
          </button>

          <button
            className="btn btn-sm btn-danger ms-3"
            onClick={(e) => {
              e.preventDefault();
              deleteRepository();
            }}
            disabled={isDeleting || !isValidInput}
            aria-label="Delete repository"
          >
            <div className="d-flex flex-row align-items-center text-uppercase">
              {isDeleting ? (
                <>
                  <span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
                  <span className="ms-2">Deleting...</span>
                </>
              ) : (
                <>
                  <FaTrashAlt className="me-2" />
                  <span>Delete</span>
                </>
              )}
            </div>
          </button>
        </>
      }
      header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Delete repository</div>}
      onClose={() => props.setDeletionModalStatus(false)}
      open
    >
      <div className="mw-100">
        <div className="alert alert-warning my-4">
          <span className="fw-bold text-uppercase">Important:</span> Please read this carefully.
        </div>

        <p>If you delete this repository all packages belonging to it will be deleted.</p>

        <p>
          All information related to your repository or packages will be permanently deleted as well. This includes
          packages' stars, users subscriptions to packages, webhooks, events and notifications.
        </p>

        <p>
          <span className="fw-bold">This operation cannot be undone</span>.
        </p>

        <p>
          Please type <span className="fw-bold">{props.repository.name}</span> to confirm:
        </p>

        <InputField type="text" name="repoName" autoComplete="off" value="" onChange={onInputChange} />
      </div>
    </Modal>
  );
};

export default DeletionModal;