import React from 'react'
import PropTypes from 'prop-types'
import Icon from 'react-uikit/icon'
import Button from 'react-uikit/button'
import Layout from 'react-uikit/layout'
import BEMModule from 'utils/bem'
import routes from 'global/constants/routes'
import {history} from 'router/history'

import BaseToast from '../base'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const SubscriptionStatusToast = ({isShowing, text, onDismiss}) => {
    const iconClasses = bem.classNames('c-subscription-status-toast__icon')
    const actionBtnClasses = bem.classNames(
        'c-subscription-status-toast__action-button'
    )
    const dismissBtnClasses = bem.classNames(
        'c-subscription-status-toast__dismiss-button'
    )
    const navigateToPayment = () => {
        history.push(routes.PAYMENT)
        onDismiss && onDismiss()
    }

    return (
        <BaseToast iconName="alert-error" isShowing={isShowing}>
            <Layout.Flex direction="column" justify="center">
                <Layout.Flex align="center" justify="start">
                    <Icon className={iconClasses} name="alert-error" />
                    <span>{text}</span>
                </Layout.Flex>

                <Layout.Flex align="center" justify="end">
                    <Button
                        className={actionBtnClasses}
                        text="UPGRADE NOW"
                        onClick={navigateToPayment}
                    />
                    <Button
                        className={dismissBtnClasses}
                        text="LATER"
                        onClick={onDismiss}
                    />
                </Layout.Flex>
            </Layout.Flex>
        </BaseToast>
    )
}

SubscriptionStatusToast.propTypes = {
    isShowing: PropTypes.bool,
    text: PropTypes.string,
    onDismiss: PropTypes.func,
}

export default SubscriptionStatusToast