import React, {useCallback, useState} from 'react'
import PropTypes from 'prop-types'
import TabsWithSlider from 'react-uikit/tabs/with-slider'
import Layout from 'components/layout'
import PageHeader from 'components/page-header'
import ChargesTab from './partials/charges'
import OrdersTab from './partials/orders'
import SubscriptionsTab from './partials/subscriptions'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const TABS = [
    {value: 'subscriptions', label: 'Subscriptions', render: SubscriptionsTab},
    {value: 'orders', label: 'Orders', render: OrdersTab},
    {value: 'charges', label: 'Charges', render: ChargesTab},
]

const BillingOverview = ({
    billing,
    showModal,
    onCancelSubscriptions,
    onGetCharges,
    onGetOrders,
    onGetSubscriptions,
}) => {
    const [tabIndex, setTabIndex] = useState(0)
    const setTab = useCallback(({index}) => setTabIndex(index), [])

    const classes = bem.classNames('c-billing-overview__layout')
    const tabsClasses = bem.classNames('c-billing-overview__tabs')
    const tabItemClasses = bem.classNames('c-billing-overview__tab-item')
    const activeTabClasses = bem.classNames(
        'c-billing-overview__tab-item--active'
    )
    const tabViewClasses = bem.classNames('c-billing-overview__tab-view')
    const Tab = TABS[tabIndex].render

    return (
        <Layout.Section className={classes} hasBackground>
            <PageHeader>
                <h1>Billing Overview</h1>
            </PageHeader>

            <TabsWithSlider
                activeIndex={tabIndex}
                className={tabsClasses}
                items={TABS}
                itemClassName={tabItemClasses}
                itemActiveClassName={activeTabClasses}
                onItemSelected={setTab}
            >
                <TabsWithSlider.Items />
                <TabsWithSlider.Slider />
            </TabsWithSlider>

            <div className={tabViewClasses}>
                <Tab
                    billing={billing}
                    showModal={showModal}
                    onCancelSubscriptions={onCancelSubscriptions}
                    onGetCharges={onGetCharges}
                    onGetOrders={onGetOrders}
                    onGetSubscriptions={onGetSubscriptions}
                />
            </div>
        </Layout.Section>
    )
}

BillingOverview.propTypes = {
    billing: PropTypes.object,
    showModal: PropTypes.func,
    onCancelSubscriptions: PropTypes.func,
    onGetCharges: PropTypes.func,
    onGetOrders: PropTypes.func,
    onGetSubscriptions: PropTypes.func,
}

export default BillingOverview