import React, { useState } from 'react';
import { i18n } from '@osd/i18n';
import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
import { BrowserRouter as Router } from 'react-router-dom';

import {
EuiButton,
EuiHorizontalRule,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageHeader,
EuiTitle,
EuiText,
} from '@elastic/eui';

import { CoreStart } from '<%= importFromRoot('src/core/public') %>';
  import { NavigationPublicPluginStart } from '<%= importFromRoot('src/plugins/navigation/public') %>';

    import { PLUGIN_ID, PLUGIN_NAME } from '../../common';

    interface <%= upperCamelCase(name) %>AppDeps {
      basename: string;
      notifications: CoreStart['notifications'];
      http: CoreStart['http'];
      navigation: NavigationPublicPluginStart;
      }

      export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http, navigation }: <%=
          upperCamelCase(name) %>AppDeps) => {
          // Use React hooks to manage state.
          const [timestamp, setTimestamp] = useState<string | undefined>();

            const onClickHandler = () => {
            <% if (hasServer) { %>
              // Use the core http service to make a response to the server API.
              http.get('/api/<%= snakeCase(name) %>/example').then(res => {
                setTimestamp(res.time);
                // Use the core notifications service to display a success message.
                notifications.toasts.addSuccess(i18n.translate('<%= camelCase(name) %>.dataUpdated', {
                  defaultMessage: 'Data updated',
                  }));
                  });
                  <% } else { %>
                    setTimestamp(new Date().toISOString());
                    notifications.toasts.addSuccess(PLUGIN_NAME);
                    <% } %>
                      };

                      // Render the application DOM.
                      // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
                      return (
                      <Router basename={basename}>
                        <I18nProvider>
                          <>
                            <navigation.ui.TopNavMenu appName={ PLUGIN_ID } showSearchBar={true}
                              useDefaultBehaviors={true} />
                            <EuiPage restrictWidth="1000px">
                               <EuiPageBody component="main">
                                <EuiPageHeader>
                                  <EuiTitle size="l">
                                    <h1>
                                      <FormattedMessage id="<%= camelCase(name) %>.helloWorldText"
                                        defaultMessage="{name}" values={{ name: PLUGIN_NAME }} />
                                    </h1>
                                  </EuiTitle>
                                </EuiPageHeader>
                                <EuiPageContent>
                                  <EuiPageContentHeader>
                                    <EuiTitle>
                                      <h2>
                                        <FormattedMessage id="<%= camelCase(name) %>.congratulationsTitle"
                                          defaultMessage="Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!" />
                                      </h2>
                                    </EuiTitle>
                                  </EuiPageContentHeader>
                                  <EuiPageContentBody>
                                    <EuiText>
                                      <p>
                                        <FormattedMessage id="<%= camelCase(name) %>.content"
                                          defaultMessage="Look through the generated code and check out the plugin development documentation." />
                                      </p>
                                      <EuiHorizontalRule />
                                      <p>
                                        <FormattedMessage id="<%= camelCase(name) %>.timestampText"
                                          defaultMessage="Last timestamp: {time}" values={{ time: timestamp ? timestamp
                                          : 'Unknown' }} />
                                      </p>
                                      <EuiButton type="primary" size="s" onClick={onClickHandler}>
                                        <FormattedMessage id="<%= camelCase(name) %>.buttonText"
                                          defaultMessage="<%= hasServer ? 'Get data' : 'Click me' %>" />
                                      </EuiButton>
                                    </EuiText>
                                  </EuiPageContentBody>
                                </EuiPageContent>
                              </EuiPageBody>
                            </EuiPage>
                          </>
                        </I18nProvider>
                      </Router>
                      );
                      };