import type { ReactElement } from 'react';
import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import Icon from '../Icon';
import Typography from '../Typography';
import {
  StyledPrefixContainer,
  StyledSuffixContainer,
  StyledTitleContainer,
  StyledListItemContainer,
} from './StyledBasicListItem';
import type { IconName } from '../Icon';
import { useTheme } from '../../theme';

interface ListItemProps {
  /**
   * Name of Icon or component to render on the left side of title.
   */
  prefix?: IconName | React.ReactElement;
  /**
   * Name of Icon or component to render on the right side of title.
   */
  suffix?: IconName | React.ReactElement;
  /**
   * The title of the component.
   */
  title: string | React.ReactElement;
  /**
   * The subtile title of the component.
   */
  subtitle?: string;
  /**
   * Whether the component is disabled. Default value is false
   */
  disabled?: boolean;
  /**
   * Whether the component is selected. Default value is false
   */
  selected?: boolean;
  /**
   * Additional wrapper style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Set the handler to handle press event.
   */
  onPress?: () => void;
}

const BasicListItem = ({
  prefix,
  suffix,
  title,
  subtitle,
  style,
  testID,
  selected = false,
  disabled = false,
  onPress,
}: ListItemProps): ReactElement => {
  const theme = useTheme();

  return (
    <StyledListItemContainer
      style={style}
      testID={testID}
      themeSelected={selected}
      themeDisabled={disabled}
      onPress={onPress}
      disabled={disabled}
      underlayColor={
        theme.__hd__.list.colors.checkedListItemContainerBackground
      }
    >
      <>
        {prefix && (
          <StyledPrefixContainer>
            {typeof prefix === 'string' ? (
              <Icon
                icon={prefix}
                intent={disabled ? 'disabled-text' : 'primary'}
              />
            ) : (
              prefix
            )}
          </StyledPrefixContainer>
        )}
        <StyledTitleContainer>
          {typeof title === 'string' ? (
            <Typography.Body intent="body">{title}</Typography.Body>
          ) : (
            title
          )}
          {subtitle && (
            <Typography.Caption intent="subdued">{subtitle}</Typography.Caption>
          )}
        </StyledTitleContainer>
        {suffix && (
          <StyledSuffixContainer>
            {typeof suffix === 'string' ? (
              <Icon
                icon={suffix}
                size="small"
                intent={disabled ? 'disabled-text' : 'primary'}
              />
            ) : (
              suffix
            )}
          </StyledSuffixContainer>
        )}
      </>
    </StyledListItemContainer>
  );
};

export default BasicListItem;