/**
 * Copyright (c) 2024 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE-MIT file in the root directory of this source tree.
 */

import React, { useEffect } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const NavigationContext = React.createContext<
  | {
    currentPageName: string;
    navigateTo: (pageName: string) => void;
    registerPageName: (pageName: string) => void;
    registeredPageNames: string[];
  }
  | undefined
>(undefined);

export function NavigationContainer({
  initialPage = 'INDEX',
  children,
}: {
  initialPage?: string;
  children: any;
}) {
  const [currentPageName, setCurrentPageName] = React.useState(initialPage);
  const [registeredPageNames, setRegisteredPageNames] = React.useState<
    string[]
  >([]);

  return (
    <NavigationContext.Provider
      value={{
        currentPageName,
        navigateTo: setCurrentPageName,
        registerPageName: (pageName: string) => {
          setRegisteredPageNames(pageNames => {
            if (pageNames.includes(pageName)) {
              return pageNames;
            }
            return [...pageNames, pageName];
          });
        },
        registeredPageNames,
      }}>
      <Page name="INDEX">
        <IndexPage />
      </Page>
      {children}
    </NavigationContext.Provider>
  );
}

export function useNavigation() {
  return React.useContext(NavigationContext)!;
}

export function Page({ name, children }: { name: string; children: any }) {
  const { currentPageName, navigateTo, registerPageName } = useNavigation();

  useEffect(() => {
    if (name !== 'INDEX') {
      registerPageName(name);
    }
  }, [name]);

  return name === currentPageName ? (
    <View style={{ width: '100%', height: '100%' }}>
      {name !== 'INDEX' && (
        <TouchableOpacity
          onPress={() => {
            navigateTo('INDEX');
          }}>
          <Text style={styles.buttonText}>{'‹ Back'}</Text>
        </TouchableOpacity>
      )}
      {children}
    </View>
  ) : null;
}

export function IndexPage() {
  const { navigateTo, registeredPageNames } = useNavigation();

  return (
    <FlatList
      data={registeredPageNames}
      renderItem={({ item }) => {
        return (
          <TouchableOpacity
            onPress={() => {
              navigateTo(item);
            }}>
            <Text style={styles.buttonText}>{item}</Text>
          </TouchableOpacity>
        );
      }}
      ItemSeparatorComponent={() => (
        <View style={{ height: 1, backgroundColor: 'silver' }} />
      )}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: '#333',
  },
  buttonText: {
    width: '100%',
    fontWeight: 'bold',
    paddingHorizontal: 16,
    paddingVertical: 24,
    color: 'blue',
  },
});