const {useState, useEffect} = React;

const Subscriptions = () => {

    const [activeTab, setActiveTab] = useState(window.location.hash.replace('#', '') || 'pro-sebe');

    window.addEventListener('hashchange', function(){
        setActiveTab(window.location.hash.replace('#', '') || 'pro-sebe');
    });

    const renderContent = () => {
        switch (activeTab) {
            case 'pro-sebe':
                return (<SubscriptionBasic />);
            case 'pro-firmu':
                return (<SubscriptionCompany />);
            case 'mam-voucher':
                return (<SubscriptionVoucher />);
            case 'jako-darek':
                return (<SubscriptionGift setActiveTab={setActiveTab} />);
            case 'jako-darek-digi':
                return (<SubscriptionGiftDigi />);
            case 'dalsi-moznosti':
                return (<SubscriptionOther />);
        }
    }

    return (
        <div className="wrapper">
            <div role="document" className="wrap">
                <main role="main" className="main">
                    <section className="subscription">
                        <div className="container">
                            <div className="subscription__inner">
                                <div className="subscription__header">
                                    <h1>CHCI PŘEDPLATNÉ</h1>
                                </div>
                                <div className="subscription__nav">
                                    <nav>
                                        <ul>
                                            <li id={'tab-pro-sebe'} className={activeTab === 'pro-sebe' ? 'subscriptions-tab active' : 'subscriptions-tab'}>
                                                <a href="#pro-sebe">Pro sebe</a>
                                            </li>
                                            <li id={'tab-jako-darek'} className={(activeTab === 'jako-darek' || activeTab === 'jako-darek-digi') ? 'subscriptions-tab active' : 'subscriptions-tab'}>
                                                <a href="#jako-darek">Jako dárek</a>
                                            </li>
                                            <li id={'tab-mam-voucher'} className={activeTab === 'mam-voucher' ? 'subscriptions-tab active' : 'subscriptions-tab'}>
                                                <a href="#mam-voucher">Mám voucher</a>
                                            </li>
                                            <li id={'tab-pro-firmu'} className={activeTab === 'pro-firmu' ? 'subscriptions-tab active' : 'subscriptions-tab'}>
                                                <a href="#pro-firmu">Pro firmu</a>
                                            </li>
                                            <li id={'tab-dalsi-moznosti'} className={activeTab === 'dalsi-moznosti' ? 'subscription-tabs active' : 'subscriptions-tab'}>
                                                <a href="#dalsi-moznosti">Další možnosti</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                                {renderContent()}
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </div>
    );

};

const container = document.getElementById('subscriptions');
container && ReactDOM.render(<Subscriptions/>, container);