/**
 * Copyright (c) 2021 BlockDev AG
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from "react"
import toast, { Toast } from "react-hot-toast"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTimes } from "@fortawesome/free-solid-svg-icons"
import styled from "styled-components"

const Container = styled.div`
    display: flex;
`

const Dismiss = styled.div`
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
    color: #ccc;

    &:hover {
        color: #aaa;
    }
`
export const dismissibleToast = (message: JSX.Element | string | null): ((t: Toast) => JSX.Element) => {
    return function dismissibleToast(t: Toast): JSX.Element {
        return (
            <Container>
                <div>{message}</div>
                <Dismiss onClick={() => toast.dismiss(t.id)}>
                    <FontAwesomeIcon icon={faTimes} />
                </Dismiss>
            </Container>
        )
    }
}