/**
 * 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 { observer } from "mobx-react-lite"
import styled from "styled-components"
import ReactTooltip from "react-tooltip"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons"

import { useStores } from "../../../../store"
import { Paragraph } from "../../../../ui-kit/typography"
import { brandLight } from "../../../../ui-kit/colors"
import { countryName } from "../../../../location/countries"

const LineItem = styled(Paragraph)`
    border-bottom: 1px dashed #ddd;
    padding: 10px 0;
    text-align: left;
`

const LineItemAmount = styled.span`
    float: right;
    font-weight: bold;
`

const TooltipIcon = styled(FontAwesomeIcon).attrs({
    icon: faQuestionCircle,
})`
    margin-left: 10px;
`

const Tooltip = styled(ReactTooltip).attrs({
    effect: "solid",
})`
    width: 200px;
`

export const OrderBreakdown: React.FC = observer(() => {
    const { payment } = useStores()

    return (
        <>
            <LineItem>
                {payment.order?.receiveMyst} {payment.appCurrency}
                <LineItemAmount>
                    {payment.order?.itemsSubTotal} {payment.order?.currency}
                </LineItemAmount>
            </LineItem>
            {!!Number(payment.order?.taxSubTotal) && (
                <LineItem>
                    <Tooltip id="vat-tooltip">
                        <span>
                            {countryName(payment.order?.country)} - {payment.order?.taxRate}%
                        </span>
                    </Tooltip>
                    VAT
                    <TooltipIcon data-tip="" data-for="vat-tooltip" />
                    <LineItemAmount>
                        {payment.order?.taxSubTotal} {payment.order?.currency}
                    </LineItemAmount>
                </LineItem>
            )}
            <LineItem style={{ color: brandLight }}>
                Total
                <LineItemAmount>
                    {payment.order?.orderTotal} {payment.order?.currency}
                </LineItemAmount>
            </LineItem>
            {payment.order?.payCurrency !== payment.order?.currency && (
                <LineItem>
                    Pay by:
                    <LineItemAmount>
                        {payment.order?.payAmount} {payment.order?.payCurrency}
                    </LineItemAmount>
                </LineItem>
            )}
        </>
    )
})