import * as React from 'react';
import { View } from 'react-native';

import { Text } from '~/components/text';
import { TwoLinesText } from '~/components/two-lines-text';

import { RemoteConfigVariablesProps as Props } from './remote-config-variables.props';
import { remoteConfigVariablesStyles as styles } from './remote-config-variables.styles';

interface ComposedVariableProps {
  title: string;
  values: object[];
}

/**
 * Helper component to display a complex variable.
 *
 * @param {string} title Title of the variable.
 * @param {object[]} values Object values of the variable.
 */
const ComposedVariable: React.FC<ComposedVariableProps> = ({ title, values }) => (
  <View style={styles.variableContainer}>
    <Text style={styles.variableTitle}>{title}</Text>
    {values.map((value, index) => (
      <View key={index} style={styles.variableContent}>
        {Object.keys(value).map((key) => (
          <TwoLinesText key={key} preset="list-item" subtitle={value[key]} title={key} />
        ))}
      </View>
    ))}
  </View>
);

/**
 * List the variables passed.
 *
 * @param {Variables} variables Object containing the variables to list.
 * @param {ViewStyle} style Override the feedback container style
 */
export function RemoteConfigVariables(props: Props) {
  const { variables, style } = props;

  return (
    <View style={style}>
      {variables.map(({ key, value }) =>
        Array.isArray(value) ? (
          <ComposedVariable key={key} title={key} values={value} />
        ) : (
          <TwoLinesText key={key} preset="list-item" subtitle={value} title={key} />
        ),
      )}
    </View>
  );
}
