// Embedded templates for plugin and navigator creation
export const WIDGET_TEMPLATE = `// (NOTE FOR LLM's) Do not modify this file! It is autogenerated at build time and your changes will be lost.
import { connectWidget } from 'apptile-core';
import {ReactComponent, WidgetConfig, WidgetEditors, PropertySettings} from './component'

const pluginListing = {
  labelPrefix: '__LABEL_PREFIX__',
  type: 'widget',
  name: '__LISTING_NAME__',
  description: '__DISPLAY_DESCRIPTION__',
  layout: {
    width: 50,
    height: 30,
  },
  section: 'SDK',
  icon: '__LISTING_ICON__',
  manifest: {
    directoryName: '__PLUGIN_REGISTRY_NAME__',
  }
};

export default connectWidget('__PLUGIN_REGISTRY_NAME__', 
  ReactComponent, 
  WidgetConfig, 
  null, 
  WidgetEditors, 
  {
    propertySettings: PropertySettings,
    widgetStyleConfig: [],
    pluginListing,
    docs: {},
  }
);`;

export const COMPONENT_TEMPLATE = `import React from 'react';
import { View, Text, Image } from 'react-native';
import { useApptileWindowDims } from 'apptile-core';

export function ReactComponent({ model }) {
  const id = model.get('id');
  const {width, height} = useApptileWindowDims();
  return (
    <View
      nativeID={'rootElement-' + id}
      style={{
        height: height - (2 * 20),
        flex: 'unset',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#00000010',
        margin: 20,
        borderRadius: 25,
        paddingLeft: 80,
        paddingRight: 80
      }}
    >
      <Text
        nativeID={'Text-__PLUGIN_REGISTRY_NAME__-welcometext'}
        style={{
          fontSize: 60,
          textAlign: 'center'
        }}
      >
       Working on the design
      </Text>
      <Image 
        nativeID={'Image-__PLUGIN_REGISTRY_NAME__-loadingindicator'}
        source={{uri: 'https://cdn-demo.apptile.io/621ca46b-031f-4e49-9d51-ca80fd746a36/9486e0c8-bcc0-413d-a556-cab0647a0f74/original.png'}}
        style={{width: 55, height: 55, transform: [{rotate: "45deg"}]}}
      />
    </View>
  );
}

export const WidgetConfig = {
};

export const WidgetEditors = {
  basic: [],
};

export const PropertySettings = {};

export const WrapperTileConfig = {
  name: 'Rating Summary Card',
  defaultProps: {
  },
};
`;

export const NAVIGATOR_TEMPLATE = `import React from 'react';
import {Platform} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createScreenFromConfig, createNavigatorsFromConfig} from 'apptile-core';

const BottomTabNavigator = createBottomTabNavigator();

export default function createBottomTabNavigatorFromConfig(
  navigatorConfig,
  navigatorModel,
  props = {},
  pages,
){
  let navigatorOptions = {
    screenOptions: {
      tabBarLabelPosition: 'below-icon',
    },
  };

  if (Platform.OS !== 'web') navigatorOptions = {...navigatorOptions, detachInactiveScreens: false};

  return (
    <BottomTabNavigator.Navigator 
      id={navigatorConfig.name} 
      {...navigatorOptions} 
      {...props}
    >
      {navigatorConfig.screens
        .map(config => {
          const screenModel = navigatorModel?.screens[config.name];
          return config.type === 'navigator' ? (
            <BottomTabNavigator.Screen
              name={config.name}
              key={config.name}
              navigationKey={config.name}
              options={{headerShown: false}}>
              {screenProps => createNavigatorsFromConfig(config, screenModel, screenProps, pages)}
            </BottomTabNavigator.Screen>
          ) : (
            createScreenFromConfig(BottomTabNavigator, config, screenModel, pages)
          );
        })
        .toList()
        .toJS()}
    </BottomTabNavigator.Navigator>
  );
};`;
