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

import { Icon } from '~/components/icon';
import { Text } from '~/components/text';
import { enhanceViewStyle } from '~/utils/styles';

import { spacePresets, sectionIcon } from './details-section.presets';
import { DetailsSectionProps as Props } from './details-section.props';
import { DetailsSectionStyles as styles } from './details-section.styles';

/**
 * Render the child in a section with a header and an icon.
 *
 * @param {PaackIcons} icon Header icon name.
 * @param {Space} space Optional vertical space.
 * @param {string} title The title to display if not using `tx` or nested components.
 * @param {string} titleTx Title which is looked up via i18n.
 * @param {object} titleTxOptions Optional options to pass to i18n.
 * @param {ReactNode} children Children component.
 * @param {ViewStyle} detailsStyle An optional style override for the details container.
 * @param {ViewStyle} headerStyle An optional style override for the header container.
 * @param {ViewStyle} style An optional style override for the root view.
 */
export const DetailsSection: React.FC<Props> = (props) => {
  const {
    children,
    detailsStyle,
    headerStyle: headerStyleOverride,
    icon,
    space,
    style: styleOverride,
    title,
    titleTransform,
    titleTx,
    titleTxOptions,
  } = props;
  const style = enhanceViewStyle([styleOverride, spacePresets[space]]);
  const headerStyle = enhanceViewStyle([styles.header, headerStyleOverride]);

  return (
    <View style={style}>
      <View style={headerStyle}>
        <Text
          preset="header5"
          text={title}
          transform={titleTransform}
          tx={titleTx}
          txOptions={titleTxOptions}
        />
        <Icon color={sectionIcon.color} name={icon} size={sectionIcon.size} />
      </View>
      <View style={detailsStyle}>{children}</View>
    </View>
  );
};
