import React from 'react';
import {
  StyleSheet,
  TextStyle,
  View,
  ViewStyle,
  TextInput,
} from 'react-native';
import { useCustomFontStyle, useStyles, useTheme } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';

export type LLTextAskWidgetInputStyles = {
  container: ViewStyle;
  input: TextStyle;
};

export type LLTextAskWidgetInputProps =
  ComponentStyleProp<LLTextAskWidgetInputStyles> & {
    value?: string;
    disabled?: boolean;
    onChange?: (input: string) => void;
    maxLength?: number;
    placeHolder?: string;
  };

export function LLTextAskWidgetInput({
  value,
  disabled,
  onChange,
  maxLength = 250,
  placeHolder = 'Write your message',
  styles: stylesProp,
}: LLTextAskWidgetInputProps) {
  const styles = useStyles({
    componentStylesFn: getTextAskWidgetInputStyles,
    stylesProp,
  });
  const textInputStyle = useCustomFontStyle({ style: styles.input });
  const { theme } = useTheme();
  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        editable={!disabled}
        onChangeText={(text) => onChange?.(text)}
        multiline
        numberOfLines={4}
        maxLength={maxLength}
        placeholder={placeHolder}
        placeholderTextColor={theme.secondaryText}
        style={textInputStyle}
      />
    </View>
  );
}

const getTextAskWidgetInputStyles: LLComponentStyleFn<
  LLTextAskWidgetInputStyles
> = ({ theme }) =>
  StyleSheet.create({
    container: {
      display: 'flex',
    },
    input: {
      color: theme.text,
      backgroundColor: theme.widgetOption,
      textAlignVertical: 'top',
      height: 85,
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 16,
      fontSize: 12,
      borderRadius: 4,
    },
  });