import React from 'react';
import { ThemeProvider, AppConfigProvider } from '@theorchard/suite-frontend';
import { ApolloProvider } from 'react-apollo';
import { BrowserRouter } from 'react-router-dom';
import createClient from 'src/apollo';
import Header from 'src/components/header';
import IdentityProvider from 'src/components/identity-provider';
import type { FeatureFlagDictionary } from '@orchard/frontend-identity';
import type { SuiteAppConfig } from '@theorchard/suite-frontend';
import type { WorkstationUser } from 'src/types';

interface Props {
    config: SuiteAppConfig;
    featureFlags?: FeatureFlagDictionary;
    user: WorkstationUser;
}

const AppHeaderComponent: React.FC<Props> = ({
    config,
    featureFlags,
    user,
}) => (
    <AppConfigProvider config={config}>
        <IdentityProvider featureFlags={featureFlags} user={user}>
            <BrowserRouter forceRefresh>
                <ApolloProvider client={createClient(user, config)}>
                    <ThemeProvider config={config}>
                        <div className="container">
                            <div id="reactAppHeader" className="row">
                                <div className="col-xs-12 px-0">
                                    <Header isEmbedOnPhp />
                                </div>
                            </div>
                        </div>
                    </ThemeProvider>
                </ApolloProvider>
            </BrowserRouter>
        </IdentityProvider>
    </AppConfigProvider>
);

export default AppHeaderComponent;