<commit_before><commit_msg>Create a confirm modal using DOM API for blacklist delete<commit_after>export const overlayId = 'worldbrain-modal-overlay'
export const confirmBtnId = 'worldbrain-modal-confirm'
export const cancelBtnId = 'worldbrain-modal-cancel'

const overlayStyles = `
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
`

const modalStyles = `
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #000 !important;
    min-hegiht: 100px !important;
    position: relative !important;
    padding: 20px !important;
    border-radius: 5px !important;
    border: 1px solid #e5e5e5 !important;
    width: 400px !important;
    height: 130px !important;
    background: #fff !important;
`

const btnBarStyles = `
    display: flex !important;
    justify-content: space-around !important;
    width: 100% !important;
`

const btnStyles = (confirm = false) => `
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 25px !important;
    width: 75px !important;
    cursor: pointer !important;
    font-size: 1.2em !important;
    font-weight: 500 !important;
    border-radius: none !important;
    ${confirm ? 'color: #f44336 !important;' : 'color: #000 !important;'}
`

const createEl = ({ elType = 'div', id, style, innerText }) => {
    const el = document.createElement(elType)
    if (id) el.id = id
    if (style) el.style = style
    if (innerText) el.innerText = innerText
    return el
}

/**
 * Plain confirm modal affording confirm and cancel actions.
 * @param {any} props Props affording `text` to be shown, and `onConfirm` + `onCancel` callbacks to be bound to buttons.
 * @return {Element} The created modal overlay that can be mounted in the DOM.
 */
const ConfirmModal = ({ text, confirmText, cancelText, onConfirm, onCancel }) => {
    // Create all needed elements
    const overlay = createEl({ id: overlayId, style: overlayStyles })
    const modal = createEl({ style: modalStyles, innerText: text })
    const btnBar = createEl({ style: btnBarStyles })
    const confirmBtn = createEl({
        id: confirmBtnId,
        innerText: confirmText,
        style: btnStyles(true),
    })
    const cancelBtn = createEl({
        id: cancelBtnId,
        innerText: cancelText,
        style: btnStyles(),
    })

    // Add btn event listeners
    confirmBtn.addEventListener('click', onConfirm)
    cancelBtn.addEventListener('click', onCancel)

    // Attach all elements
    btnBar.appendChild(confirmBtn)
    btnBar.appendChild(cancelBtn)
    modal.appendChild(btnBar)
    overlay.appendChild(modal)

    return overlay
}

export default ConfirmModal
{'fraction_non_alphanumeric': 0.10943148209004272, 'fraction_numerical': 0.01675977653631285, 'mean_word_length': 3.489675516224189, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2751720', 'n_tokens_mistral': 935, 'n_tokens_neox': 889, 'n_words': 279}