import { useState } from 'react';
import { useSelector } from 'react-redux';

import ConfirmationDialog from '../../common/ConfirmationDialog';
import { useAppDispatch } from '../store';
import { selectHostsLoadingStates } from '../store/hostsSlice/selectors';
import { deleteHosts, requestReportCollection, triggerAgentRun } from '../store/hostsSlice/thunks';
import { notify } from '../utils/notify';

interface Props {
  hostkey: string;
  hostname: string;
}

export const HostHeader = ({ hostkey, hostname }: Props) => {
  const dispatch = useAppDispatch();
  const loadingStates = useSelector(selectHostsLoadingStates);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const busy =
    loadingStates.deleteHosts ||
    loadingStates.requestReportCollection ||
    loadingStates.triggerAgentRun;

  const handleCopyLink = () => {
    const link = `${window.location.origin}/hosts/${hostkey}`;
    navigator.clipboard
      .writeText(link)
      .then(() => notify.success('Link copied'))
      .catch(() => notify.error('Copy failed'));
  };

  return (
    <>
      <div className="pageTitle">
        <h1>{hostname}</h1>
      </div>
      <div className="relative">
        <div className="host-buttons">
          <button
            className="float-right btn btn-info"
            title="Remove host"
            onClick={() => setDeleteOpen(true)}
            disabled={busy}
          >
            <i className="bi bi-trash" />
          </button>
          <button
            className="float-right btn btn-info margin-right-xs"
            title="Copy link"
            onClick={handleCopyLink}
            disabled={busy}
          >
            <i className="bi bi-share" />
          </button>
          <button
            className="float-right btn btn-primary margin-right-xs"
            title="Request report collection"
            onClick={() => dispatch(requestReportCollection(hostkey))}
            disabled={busy}
          >
            <i className="bi bi-arrow-repeat" />
          </button>
          <button
            className="float-right btn btn-primary margin-right-xs"
            title="Trigger agent run"
            onClick={() => dispatch(triggerAgentRun(hostkey))}
            disabled={busy}
          >
            <i className="bi bi-caret-right-fill" />
          </button>
        </div>
      </div>

      <ConfirmationDialog
        open={deleteOpen}
        onClose={() => setDeleteOpen(false)}
        onConfirm={() => dispatch(deleteHosts([hostkey]))}
        title="Remove host?"
        message="Are you sure you want to remove the host? Deletion is permanent. Please ensure the host no longer exists or CFEngine is fully uninstalled from it. After deletion, if you want the host to report again, you will need to generate a new keypair and bootstrap again, as if it was a completely new host, it will not reappear automatically."
        confirmText="Remove"
        confirmColor="error"
        cancelText="Cancel"
      />
    </>
  );
};
