import React from 'react';

import type { ReactNode, ReactElement } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import { View } from 'react-native';
import { useTheme } from '../../theme';
import type { IconName } from '../Icon';
import Icon from '../Icon';
import Typography from '../Typography';
import {
  StyledChildrenContainer,
  StyledContentContainer,
  StyledLeadingStatus,
  StyledListItemContainer,
  StyledPrefixContainer,
  StyledSuffixContainer,
  StyledTitleContainer,
} from './StyledListItem';

export interface ListItemProps {
  /**
   * Name of Icon or ReactElement to render on the left side of title.
   */
  prefix?: IconName | React.ReactElement;
  /**
   * Name of Icon or ReactElement to render on the right side of title.
   */
  suffix?: IconName | React.ReactElement;
  /**
   * The title of the component.
   */
  title?: string | ReactElement;
  /**
   * The subtile title of the component.
   */
  subtitle?: string;
  /**
   * Additional wrapper style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Children to be rendered inside the component.
   */
  children?: ReactNode;
  /**
   * Leading status of the component
   * */
  leadingStatus?: 'success' | 'warning' | 'danger' | 'info' | 'archived';

  /*
   * Card styles. Default is `full-width`
   */
  variant?: 'full-width' | 'card';
  /**
   * Whether the component is disabled. Default value is false
   */
  disabled?: boolean;
  /** * Whether the component is selected. Default value is false
   */
  selected?: boolean;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Set the handler to handle press event.
   */
  onPress?: () => void;
}

const ListItem = ({
  prefix,
  suffix,
  title,
  subtitle,
  style,
  testID,
  selected = false,
  children,
  leadingStatus,
  variant = 'full-width',
  onPress,
  disabled = false,
}: ListItemProps): ReactElement => {
  const theme = useTheme();

  return (
    <StyledListItemContainer
      style={style}
      testID={testID}
      themeSelected={selected}
      themeVariant={variant}
      onPress={onPress}
      disabled={disabled}
      underlayColor={
        theme.__hd__.list.colors.checkedListItemContainerBackground
      }
    >
      <>
        {leadingStatus && (
          <StyledLeadingStatus
            themeLeadingStatusIntent={leadingStatus}
            testID="leadingStatus"
          />
        )}
        <StyledContentContainer>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            {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}
                    intent={disabled ? 'disabled-text' : 'primary'}
                    size="small"
                  />
                ) : (
                  suffix
                )}
              </StyledSuffixContainer>
            )}
          </View>
          {children && (
            <StyledChildrenContainer>{children}</StyledChildrenContainer>
          )}
        </StyledContentContainer>
      </>
    </StyledListItemContainer>
  );
};

export default ListItem;