import React, {FC, PropsWithChildren, ReactNode, ReactElement} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {IconChevronRight, IconProps} from '@tabler/icons-react-native';
import CheckboxChecked from '@assets/checkboxChecked.svg';
import CheckboxUnchecked from '@assets/checkboxUncheked.svg';
import {Avatar} from '@components/_HuGo/Avatar';
import {Title, TitleSize, TitleVariant} from '@components/_HuGo/Title';
import {IconButton} from '@components/_HuGo/Button';
import {Pressable} from '@components/_core/Pressable';
import {avatarIsValid} from '@components/_HuGo/List/utils';
import {commonStyles} from '@shared/styles';
import {useTheme} from '@shared/theme';

import {ListItemAvatarProps, ListPresentation} from '../../interfaces';
import {styles} from './styles';

export interface ListItemProps extends PropsWithChildren {
  title: string | ReactNode;
  description?: string;
  renderDescription?: () => ReactNode;
  topText?: string;
  avatar?: ListItemAvatarProps;
  withRightIcon?: boolean;
  onPressRightButton?: () => void;
  RightButton?: FC<IconProps>;
  RightDescriptor?: () => ReactElement;
  style?: StyleProp<ViewStyle>;
  backgroundColor?: string;
  onItemPress?: () => void;
  textVariant?: TitleVariant;
  isFirstItem?: boolean;
  isLastItem?: boolean;
  presentation?: ListPresentation;
  descriptionNumberOfLines?: number;
  selectEnabled?: boolean;
  isSelected?: boolean;
  titleNumberOfLines?: number;
  selectorDisabled?: boolean;
  titleSize?: TitleSize;
  accessible?: boolean;
  accessibilityLabel?: string;
}

export function ListItem({
  title,
  description,
  topText,
  avatar,
  onPressRightButton,
  RightButton,
  withRightIcon,
  children,
  style,
  onItemPress,
  textVariant,
  renderDescription,
  backgroundColor,
  isFirstItem,
  isLastItem,
  presentation = 'flat',
  descriptionNumberOfLines,
  selectEnabled,
  isSelected,
  RightDescriptor,
  titleNumberOfLines = 1,
  selectorDisabled,
  titleSize = 's',
  accessible = true,
  accessibilityLabel,
}: ListItemProps) {
  const {iconSizes, theme} = useTheme();
  const isCardPresentation = presentation === 'card';
  const showAvatar = avatar && avatarIsValid(avatar);
  return (
    <Pressable
      backgroundColor={backgroundColor || theme.background.layout.tertiary}
      onPress={onItemPress}
      style={[
        styles.container,
        isCardPresentation && [
          styles.itemCard,
          {borderColor: theme.border.neutral.default},
          isFirstItem && styles.firstItemCard,
          isLastItem && styles.lastItemCard,
        ],
        style,
        styles.alignCenter,
      ]}
      disabled={selectorDisabled ? true : !onItemPress}
      accessible={accessible}
      accessibilityLabel={accessibilityLabel}>
      {selectEnabled &&
        (isSelected ? (
          <CheckboxChecked
            color={
              selectorDisabled
                ? theme.action.background.brand.disabled
                : theme.button.background.primary.default
            }
          />
        ) : (
          <CheckboxUnchecked color={theme.text.neutral.lighter} />
        ))}
      {showAvatar && <Avatar {...avatar} />}
      <Title
        title={title}
        titleNumberOfLines={titleNumberOfLines}
        topText={topText}
        description={description}
        renderDescription={renderDescription}
        size={titleSize}
        variant={textVariant}
        style={commonStyles.flex}
        descriptionNumberOfLines={descriptionNumberOfLines}
      />
      {children}
      {withRightIcon ? (
        <IconChevronRight
          size={iconSizes.x6}
          color={theme.text.neutral.default}
        />
      ) : RightDescriptor ? (
        <RightDescriptor />
      ) : RightButton ? (
        <IconButton
          Icon={RightButton}
          onPress={onPressRightButton}
          variant="tertiary"
        />
      ) : null}
    </Pressable>
  );
}
