import React from 'react';
import {
  TouchableOpacity,
  View,
  StyleSheet,
  ImageStyle,
  StyleProp,
} from 'react-native';
import Image from '../Image';
import { ImageProps } from '../Image/interface';
import { renderHighLightTextLikeJSX } from '../../core/helpers';
import { IconXRightsmall1 } from '../../icons';
import { Option, SelectProps } from './interface';
import createStyles from './styles/FlatSelect.style';
import { useTheme } from '../Theme';
import ShouldRender from '../ShouldRender';

type StylesType = ReturnType<typeof createStyles>;

const RedirectItem = React.memo(
  ({
    option,
    testID,
    currencySelectProps,
    onDisabledPress,
    onChangeFn,
    searchValue,
    styles,
    rowHeight,
  }: {
    option: Option;
    testID: string;
    itemFullContainer: boolean;
    currencySelectProps?: SelectProps['currencySelectProps'];
    onDisabledPress?: (option: Option) => void;
    onChangeFn: (values: string | string[]) => void;
    searchValue: string;
    styles: StylesType;
    rowHeight?: number;
  }) => {
    const token = useTheme();
    return (
      <TouchableOpacity
        testID={`${testID}${option.value}`}
        key={'renderRedirectItem ' + option.value}
        onPress={() => {
          if (option?.disabled) {
            onDisabledPress?.(option);
            return;
          }
          onChangeFn(option.value);
        }}
        style={StyleSheet.flatten([
          styles.itemContainer,
          typeof rowHeight === 'number' && rowHeight > 0
            ? { height: rowHeight }
            : undefined,
        ])}
      >
        <ShouldRender
          condition={
            typeof option.prefixIcon === 'string' && option.prefixIcon !== ''
          }
        >
          <Image
            {...((currencySelectProps?.imageProps as ImageProps) || {})}
            source={{ uri: option.prefixIcon?.toString() }}
            style={StyleSheet.flatten([
              styles.default_img,
              currencySelectProps?.imageStyle as StyleProp<ImageStyle>,
              option.disabled && styles.disabled_img,
            ])}
          />
        </ShouldRender>
        <ShouldRender condition={React.isValidElement(option.prefixIcon)}>
          {option.prefixIcon}
        </ShouldRender>

        <View style={styles.left_content}>
          <View>
            {renderHighLightTextLikeJSX(
              option.label,
              StyleSheet.flatten([
                styles.label,
                option.disabled && styles.labelDisabled,
              ]),
              searchValue,
              {
                numberOfLines: option.subLabel ? 1 : 2,
                ellipsizeMode: 'tail',
              }
            )}
            {renderHighLightTextLikeJSX(
              option.subLabel,
              StyleSheet.flatten([
                styles.subLabel,
                option.disabled && styles.subLabelDisabled,
              ]),
              searchValue,
              {
                numberOfLines: 2,
                ellipsizeMode: 'tail',
              }
            )}
          </View>
          {renderHighLightTextLikeJSX(
            option.contentLabel,
            StyleSheet.flatten([
              styles.contenLabel,
              option.disabled && styles.contentLabelDisabled,
            ]),
            searchValue
          )}
        </View>
        <View
          style={StyleSheet.flatten([
            styles.right_icon,
            option.disabled && styles.disabled_img,
          ])}
        >
          <IconXRightsmall1
            size={token['--font-size-3']}
            fillColor={token['--color-text-4']}
          />
        </View>
      </TouchableOpacity>
    );
  }
);

export default RedirectItem;