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

import { Tag } from '~/components/tag/tag';
import { getTxOrText } from '~/i18n';
import { PresetsWithAccent } from '~/theme';
import { getElement } from '~/utils/object';
import { enhanceViewStyle } from '~/utils/styles';

import { TagsGridProps } from './tags-grid.props';
import { TagsGridStyles as styles } from './tags-grid.styles';

/**
 * Component that shows a grid of tags.
 *
 * @param {Presets} preset Optional type of presets.
 * @param {string} tags Optional text to display if not using `tx` or nested components.
 * @param {string} tagsTx Optional text key which is looked up via i18n.
 * @param {string} tagsTxOptions Optional options to pass to i18n.
 * @param {string} title Optional title to display if not using `tx` or nested components.
 * @param {string} titleTx Optional title key which is looked up via i18n.
 * @param {ViewStyle} style Optional style override for the root view.
 * @param {ViewStyle} chipStyle Optional style override for the chip view.
 */
export const TagsGrid: React.FC<TagsGridProps> = (props) => {
  const { preset, tags, tagsTx, tagsTxOptions, style, chipStyle: chipStyleOverride } = props;
  const tagsStyle = enhanceViewStyle([styles.chip, chipStyleOverride]);
  return (
    <View style={style}>
      <View style={styles.content}>
        {getTxOrText(tags, tagsTx, tagsTxOptions).map((tag, index) => (
          <Tag
            key={index}
            preset={getElement<PresetsWithAccent>(preset, index)}
            style={tagsStyle}
            text={tag.text}
            tx={tag.tx}
          />
        ))}
      </View>
    </View>
  );
};

TagsGrid.defaultProps = {
  preset: 'primary',
};
