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

import { TwoLinesText } from '~/components/two-lines-text';
import { enhanceViewStyle } from '~/utils/styles';

import { ListItemProps as Props } from './list-item.props';
import { listItemStyles as styles } from './list-item.styles';

/**
 *  Display a title and description, with optional right
 *  or left components. Useful for listing info.
 *
 * @param title Text or component displayed in the first line.
 * @param titleTx Text which is looked up via i18n in the first line.
 * @param titleTxOptions Optional options to pass to i18n in the first line.
 * @param subtitle Text or component displayed in the second line.
 * @param subtitleTx Text which is looked up via i18n in the second line.
 * @param subtitleTxOptions Optional options to pass to i18n in the second line.
 * @param preset Presentation preset, how the title and subtitle are rendered.
 * @param rightComponent Optional right component.
 * @param leftComponent Optional left component.
 * @param separator True to draw a line below the item.
 * @param separatorColor Optional color of the separator.
 * @param separatorWidth Optional width of the separator.
 * @param pressDisabled True to disable the press
 * @param onPress Optional method called when the component is pressed.
 * @param style An optional style override.
 * @param titleStyle An optional title style override.
 * @param subtitleStyle An optional subtitle style override.
 */
export const ListItem: React.FC<Props> = (props) => {
  const {
    disabled,
    leftComponent,
    rightComponent,
    titleTx,
    title,
    titleTransform,
    titleTxOptions,
    subtitle,
    subtitleTransform,
    subtitleTx,
    subtitleTxOptions,
    preset,
    separator,
    separatorColor,
    separatorWidth,
    onPress,
    style: styleOverride,
    centerStyle,
    titleStyle,
    subtitleStyle,
  } = props;
  const twoLinesTextStyle = enhanceViewStyle([styles.twoLineTextView, centerStyle]);
  const leftStyle = leftComponent ? styles.paddingLeft : null;
  const rightStyle = rightComponent ? styles.paddingRight : null;
  const separatorStyle = enhanceViewStyle([
    separator && styles.separator,
    separatorColor && { borderBottomColor: separatorColor },
    separatorWidth && { borderBottomWidth: separatorWidth },
  ]);
  const container = enhanceViewStyle([
    styles.container,
    rightStyle,
    leftStyle,
    separatorStyle,
    styleOverride,
  ]);
  const isPressDisabled = disabled || typeof onPress !== 'function';

  function handlePress() {
    onPress();
  }

  return (
    <Pressable disabled={isPressDisabled} style={container} onPress={handlePress}>
      {leftComponent}
      <TwoLinesText
        preset={preset}
        separator={false}
        style={twoLinesTextStyle}
        subtitle={subtitle}
        subtitleStyle={subtitleStyle}
        subtitleTransform={subtitleTransform}
        subtitleTx={subtitleTx}
        subtitleTxOptions={subtitleTxOptions}
        title={title}
        titleStyle={titleStyle}
        titleTransform={titleTransform}
        titleTx={titleTx}
        titleTxOptions={titleTxOptions}
      />
      {rightComponent}
    </Pressable>
  );
};

ListItem.defaultProps = {
  preset: 'item-list',
  separator: true,
};
