import React, {JSX, useRef, useState} from 'react';
import {
  StyleSheet,
  View,
  Text as RNText,
  StyleProp,
  ViewStyle,
  TextStyle,
  ActivityIndicator,
} from 'react-native';
import {Colors, fontSz, globalStyles, hp, Images, ms} from '../../utils';
import {CustomPressable} from '../Button';
import {Text} from '../Text';
import {SmartImage} from '../Images/SmartImage';

const Dropdown = (props: {
  containerStyle?: StyleProp<ViewStyle>;
  label: string | JSX.Element;
  placeHolder: string;
  style?: StyleProp<TextStyle>;
  value: any;
  onPress?: () => void;
  loading?: boolean;
  errorMsg?: string | undefined;
  subScriptLeft?: string;
  subScriptRight?: string;
  showAsterisk?: boolean;
}) => {
  const {
    containerStyle,
    label,
    style,
    placeHolder = 'Select from dropdown',
    value,
    onPress,
    loading,
    errorMsg = '',
    subScriptLeft = '',
    subScriptRight = '',
    showAsterisk,
  } = props;

  return (
    <>
      <View style={[containerStyle]}>
        {/* Label message */}
        {typeof label === 'string' ? (
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
              alignItems: 'center',
            }}>
            <Text
              fontSize={fontSz(14)}
              fontFamily="Gordita-Regular"
              fontWeight="400"
              text={`${label}`}
              color={Colors.inputBackgroundLight}
            />
            {showAsterisk && (
              <Text
                fontSize={fontSz(14)}
                fontFamily="Gordita-Regular"
                fontWeight="400"
                text={'*'}
                color={Colors.debitRed}
              />
            )}
          </View>
        ) : (
          label
        )}

        {/* Text */}
        <CustomPressable
          activeOpacity={0.75}
          onPress={onPress}
          style={{
            flexDirection: 'row',
            height: hp(55),
            paddingHorizontal: fontSz(14),
            marginTop: fontSz(8),
            borderRadius: fontSz(8),
            borderWidth: fontSz(1),
            backgroundColor: '#F4F4F4',
            alignItems: 'center',
            borderColor: errorMsg.length > 0 ? Colors.error : '#F4F4F4',
          }}>
          <Text
            style={[
              {
                flex: 1,
                fontFamily: 'Gordita-Medium',
                color: value.length > 0 ? Colors.baseBlueText : '#C4C4C4',
              },
              style,
            ]}
            fontSize={fontSz(15)}
            text={`${value?.length > 0 ? value : placeHolder}`}
          />

          <View
            style={{
              justifyContent: 'center',
            }}>
            <CustomPressable activeOpacity={0.75} onPress={onPress}>
              {loading && (
                <ActivityIndicator size={'small'} color={Colors.tabText} />
              )}
              {!loading && (
                <SmartImage
                  source={Images.dropdown}
                  style={{
                    width: ms(18),
                    height: ms(18),
                    tintColor: Colors.tabText,
                  }}
                />
              )}
            </CustomPressable>
          </View>
        </CustomPressable>
        <View
          style={[
            {
              position: 'absolute',
              bottom: ms(-20),
              width: '100%',
            },
          ]}>
          <View style={[globalStyles.rowBetween, {width: '100%'}]}>
            {subScriptLeft.length > 0 && (
              <Text
                fontSize={fontSz(13)}
                fontFamily="Gordita-Regular"
                fontWeight="400"
                text={`${subScriptLeft}`}
                color={Colors.inputBackground}
                textAlign={'right'}
              />
            )}
            {subScriptRight.length > 0 && (
              <Text
                fontSize={fontSz(13)}
                fontFamily="Gordita-Regular"
                fontWeight="400"
                text={`${subScriptRight}`}
                color={Colors.inputBackground}
                textAlign={'right'}
              />
            )}
          </View>
        </View>
      </View>
    </>
  );
};

export default Dropdown;

const styles = StyleSheet.create({});