import {
  Image,
  ImageSourcePropType,
  StyleSheet,
  ImageStyle,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import React from 'react';
import PlayyText from '../PlayyText/PlayyText';
import {ColorsScheme, useTheme} from '../../theme/ThemeContext';
import SwitchView from '../Switch/SwitchView';
interface ListCardProps {
  isLeftIcon?: boolean;
  leftIconName?: string;
  containerStyle?: ViewStyle;
  title?: string;
  rightIconName?: string;
  wrapperStyle?: ViewStyle;
  handlePressListCard?: () => void;
  subtitle?: string;
  tallList?: boolean;
  showImage?: boolean;
  imageContainerStyle?: ViewStyle;
  rightContainerStyle?: ViewStyle;
  imageSource?: ImageSourcePropType | undefined;
  showDetail?: boolean;
  detail?: string;
  titleColor?: string;
  subtitleColor?: string;
  detailColor?: string;
  isRightIcon?: boolean;
  righticonColor?: string;
  leftIconColor?: string;
  showToggle?: boolean;
  toggleValue?: boolean;
  onToggleChange?: (value: boolean) => void;
  thumbColor?: string;
  trackColorFalse?: string;
  trackColorTrue?: string;
  switchSize?: 'small' | 'medium' | 'large';
  initial?: string;
  initialColor?: string;
  imageStyle?: ImageStyle | undefined;
  isButton?: boolean;
  buttonStyle?: ViewStyle;
  buttonText?: string;
  btnColor?: string;
  handleButtonPress?: () => void;
}
const ListCard: React.FC<ListCardProps> = ({
  isLeftIcon,
  leftIconName,
  containerStyle,
  title,
  rightIconName,
  wrapperStyle,
  handlePressListCard,
  subtitle,
  tallList = false,
  showImage,
  imageContainerStyle,
  imageSource,
  showDetail,
  detail,
  titleColor,
  subtitleColor,
  detailColor,
  isRightIcon,
  righticonColor,
  leftIconColor,
  showToggle,
  toggleValue,
  onToggleChange,
  thumbColor,
  trackColorFalse,
  trackColorTrue,
  switchSize = 'medium',
  initial = '',
  initialColor,
  imageStyle,
  rightContainerStyle,
  isButton = false,
  buttonStyle,
  buttonText,
  btnColor,
  handleButtonPress,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);
  const hasLeadingElement = showImage || isLeftIcon;
  return (
    <TouchableOpacity
      style={[
        styles.container,
        {
          // borderBottomWidth: hasLeadingElement ? 0 : 0.5,
          height: tallList ? 60 : 52,
        },
        containerStyle,
      ]}
      activeOpacity={0.7}
      onPress={handlePressListCard}>
      {isLeftIcon && (
        <View style={styles.iconContainer}>
          <PlayyText
            color={leftIconColor ? leftIconColor : colors.labels_primary}
            BodyEmphasized>
            {leftIconName}
          </PlayyText>
        </View>
      )}
      {!isLeftIcon && showImage && (
        <View style={[styles.imageContainer, imageContainerStyle]}>
          {imageSource ? (
            <Image source={imageSource} style={[styles.image, imageStyle]} />
          ) : (
            <PlayyText
              HeadlineRegular
              color={initialColor ? initialColor : colors.labels_primary}>
              {initial}
            </PlayyText>
          )}
        </View>
      )}
      <View
        style={[
          styles.wrapperContainer,
          {
            borderBottomWidth: hasLeadingElement ? 0.5 : 0,
            height: tallList ? 60 : 52,
          },
          wrapperStyle,
        ]}>
        <View style={styles.left}>
          <PlayyText
            numberOfLines={1}
            color={titleColor ? titleColor : colors.labels_primary}
            BodyRegular>
            {title}
          </PlayyText>
          {subtitle && (
            <PlayyText
              numberOfLines={1}
              color={subtitleColor ? subtitleColor : colors.labels_secondary}
              SubheadRegular>
              {subtitle}
            </PlayyText>
          )}
        </View>

        <View style={[styles.right, !isButton && { paddingRight: 16 }, rightContainerStyle]}>
          {isButton && (
            <TouchableOpacity
              style={[styles.button, buttonStyle]}
              onPress={handleButtonPress}>
              <PlayyText
                FootnoteRegular
                color={btnColor ? btnColor : colors.gray_white}>
                {buttonText}
              </PlayyText>
            </TouchableOpacity>
          )}
          {showDetail && (
            <PlayyText
              BodyRegular
              color={detailColor ? detailColor : colors.labels_secondary}>
              {detail}
            </PlayyText>
          )}
          {isRightIcon && (
            <PlayyText
              BodyEmphasized
              color={righticonColor ? righticonColor : colors.labels_tertiary}>
              {rightIconName}
            </PlayyText>
          )}
          {showToggle && (
            <SwitchView
              toggleValue={toggleValue!}
              switchSize={switchSize}
              onToggleChange={onToggleChange!}
              trackColorTrue={trackColorTrue}
              trackColorFalse={trackColorFalse}
              thumbColor={thumbColor ? thumbColor : colors.white}
            />
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};

export default ListCard;

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    container: {
      // flex: 1,//:to be changed
      flexDirection: 'row',
      gap: 12,
      borderBottomWidth: 0,
      borderBottomColor: colors.separator_non_opaque,
      paddingLeft: 16,
      alignItems: 'center',
    },
    iconContainer: {
      width: 32,
      alignItems: 'center',
    },
    wrapperContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      borderBottomColor: colors.separator_non_opaque,
    },
    left: {
      justifyContent: 'center',
      width: '88%',
    },
    right: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 16,
    },
    imageContainer: {
      width: 40,
      height: 40,
      borderRadius: 40,
      overflow: 'hidden',
      justifyContent: 'center',
      alignItems: 'center',
    },
    image: {
      width: '100%',
      height: '100%',
      borderRadius: 40,
    },
    button: {
      paddingVertical: 5,
      paddingHorizontal: 10,
      backgroundColor: colors.blue,
      borderRadius: 1000,
      alignItems: 'center',
    },
  });