import * as React from 'react';
import { TextInput, ViewStyle, TextStyle, View } from 'react-native';
import { getColor } from './style-utils';
import { SmallDotIcon } from './icons/small-dot';
import Text from './text';

interface LabelProps {
  value?: string;
  placeholder?: string;
  textColor?: string;
  placeholderColor?: string;
  textStyle?: TextStyle;
  labelClassName?: string;
  disabled?: boolean;
  onChangeText?: (text: string) => void;
  onFocus?: () => void;
  onBlur?: () => void;
  className?: string;
  style?: ViewStyle;
  secureTextEntry?: boolean;
  maxLength?: number;
  keyboardType?: 'default' | 'numeric' | 'email-address';
  editable?: boolean;
  isLabelOnly?: boolean;
  required?: boolean;
  characterCount?: boolean;
  maxCharacterCount?: number;
}

const Label = React.forwardRef<TextInput, LabelProps>(
  (
    {
      value,
      placeholder,
      textColor = '',
      placeholderColor = 'gray',
      textStyle,
      disabled = false,
      onChangeText,
      onFocus,
      onBlur,
      className = 'flex-1 px-4 pr-12 h-full',
      style,
      secureTextEntry,
      maxLength,
      keyboardType = 'default',
      editable = true,
      isLabelOnly = false,
      required = false,
      labelClassName,
      characterCount = false,
      maxCharacterCount = 0,
    },
    ref,
  ) => {
    if (isLabelOnly) {
      return (
        <View className={`flex-row`}>
          <View className="flex-row relative">
            {value && (
              <Text
                face="body"
                size="small"
                weight="medium"
                className={labelClassName}
                textColor={textColor}
              >
                {value}
              </Text>
            )}
            {required && (
              <View className="absolute -top-[2px] right-[-4px]">
                <SmallDotIcon />
              </View>
            )}
          </View>
        </View>
      );
    }

    return (
      <>
        {characterCount ? (
          <View className="flex-row justify-between">
            <TextInput
              ref={ref}
              value={value}
              textAlign={'left'}
              placeholder={placeholder}
              onChangeText={onChangeText}
              onFocus={onFocus}
              onBlur={onBlur}
              className={className}
              style={[
                {
                  color: getColor(textColor),
                  paddingLeft: 0,
                },
                style as TextStyle,
                textStyle,
              ]}
              placeholderTextColor={getColor(placeholderColor)}
              editable={!disabled && editable}
              secureTextEntry={secureTextEntry}
              maxLength={maxLength}
              keyboardType={keyboardType}
            />
            <View className="flex-row gap-[2px]">
              {value && (
                <Text
                  face="body"
                  size="xsmall"
                  weight="regular"
                  className={labelClassName}
                  textColor={textColor}
                >
                  {value ? value.length : 0}
                </Text>
              )}

              <Text
                face="body"
                size="xsmall"
                weight="regular"
                className={labelClassName}
                textColor={'gray-500'}
              >
                {'/'}
              </Text>

              {maxCharacterCount && (
                <Text
                  face="body"
                  size="xsmall"
                  weight="regular"
                  className={labelClassName}
                  textColor={'gray-500'}
                >
                  {maxCharacterCount}
                </Text>
              )}
            </View>
          </View>
        ) : (
          <TextInput
            ref={ref}
            value={value}
            placeholder={placeholder}
            onChangeText={onChangeText}
            onFocus={onFocus}
            onBlur={onBlur}
            className={className}
            style={[
              {
                color: getColor(textColor),
              },
              style as TextStyle,
              textStyle,
            ]}
            placeholderTextColor={getColor(placeholderColor)}
            editable={!disabled && editable}
            secureTextEntry={secureTextEntry}
            maxLength={maxLength}
            keyboardType={keyboardType}
          />
        )}
      </>
    );
  },
);

export default Label;