import React, { useContext } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { useComponentId } from '../Application';
import {
  ApplicationContext,
  ComponentContext,
  MiniAppContext,
} from '../Context';
import { Icon } from '../Icon';
import {
  ErrorView,
  FloatingView,
  getBorderColor,
  getSizeStyle,
} from './common';
import { InputDropDownProps } from './index';
import { Text, useScaleSize } from '../Text';
import styles from './styles';
import { Spacing } from '../Consts';

const InputDropDown = ({
  value,
  floatingValue,
  floatingIcon,
  onPressFloatingIcon,
  size = 'small',
  placeholder,
  errorMessage,
  disabled = false,
  floatingIconColor,
  required = false,
  errorSpacing,
  leadingIcon,
  leadingIconColor,
  style,
  params,
  hintText,
  multiline,
  ...props
}: InputDropDownProps) => {
  const { theme } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);
  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
  const componentName = 'InputDropDown';

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  const { componentId } = useComponentId(
    `${componentName}/${placeholder}`,
    props.accessibilityLabel,
  );

  /**
   * Render the input view
   */
  const renderInputView = () => {
    const disabledColor = theme.colors.text.disable;
    let textColor = theme.colors.text.default;
    let placeholderColor = theme.colors.text.hint;

    if (disabled) {
      textColor = disabledColor;
      placeholderColor = disabledColor;
    }

    return (
      <View
        style={[
          styles.inputDropDownWrapper,
          { backgroundColor: theme.colors.background.surface },
          getSizeStyle(size, multiline, scaleHeight),
          getBorderColor(theme, false, errorMessage, disabled as boolean),
        ]}
      >
        <FloatingView
          floatingValue={floatingValue}
          floatingIconColor={floatingIconColor}
          disabled={disabled as boolean}
          required={required}
          floatingIcon={floatingIcon}
          onPress={onPressFloatingIcon}
          componentId={componentId}
        />
        <View style={styles.inputDropDownView}>
          {!!leadingIcon && (
            <View
              style={[
                styles.leadingIconContainerDropDown,
                {
                  marginRight: Spacing.S,
                },
              ]}
            >
              <Icon
                color={leadingIconColor}
                source={leadingIcon}
                size={size === 'small' ? 24 : 32}
                accessibilityLabel={`${componentId}|leading-icon`}
              />
            </View>
          )}
          <View style={styles.textViewDropDown}>
            <Text
              numberOfLines={multiline ? undefined : 1}
              typography={'body_default_regular'}
              color={value ? textColor : placeholderColor}
              accessibilityState={{ disabled: disabled as boolean }}
              accessibilityLabel={`${componentId}`}
            >
              {value || placeholder}
            </Text>
          </View>
        </View>
        <View
          style={[
            styles.iconViewDropDown,
            {
              alignItems: multiline ? 'flex-start' : 'center',
              paddingTop: multiline ? Spacing.M : 0,
            },
          ]}
        >
          <Icon source={'arrow_chevron_down_small'} />
        </View>
      </View>
    );
  };

  return (
    <ComponentContext.Provider
      value={{
        componentName,
        componentId,
        params,
        state: 'enabled',
      }}
    >
      <TouchableOpacity
        {...props}
        accessibilityLabel={`${componentId}|touch`}
        accessibilityState={{ disabled: disabled as boolean }}
        activeOpacity={0.6}
        style={[
          style,
          styles.wrapper,
          showBaseLineDebug && styles.debugBaseLine,
        ]}
      >
        {renderInputView()}
        <ErrorView
          errorMessage={errorMessage}
          errorSpacing={errorSpacing}
          hintText={hintText}
          componentId={componentId}
        />
      </TouchableOpacity>
    </ComponentContext.Provider>
  );
};

export default InputDropDown;