import React, {useRef} from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import {
  Colors,
  globalStyles,
  ms,
  wp,
  fontSz,
} from '../../../utils';
import Header from '../../Header';
import {Button} from '../../Button';
import {Text} from '../../Text';

interface SuggestedPlanInfoProps {
  planName: string;
}

const SuggestedPlanInfo: React.FC<SuggestedPlanInfoProps> = ({planName}) => (
  <View style={styles.planInfoContainer}>
    <Text
      fontSize={fontSz(12)}
      fontFamily="Gordita-Regular"
      fontWeight="400"
      color={Colors.neutral90}
      text="Plan:"
    />
    <Text
      fontSize={fontSz(12)}
      fontFamily="Gordita-Medium"
      fontWeight="500"
      color={Colors.neutral30}
      text={planName}
      style={{marginLeft: ms(4)}}
    />
  </View>
);

interface SavingsFormLayoutProps {
  title: string;
  onBack: () => void;
  onSubmit: () => void;
  children: React.ReactNode;
  scrollViewRef?: React.RefObject<ScrollView | null>;
  suggestedPlanName?: string;
}

const styles = StyleSheet.create({
  content: {
    paddingVertical: ms(20),
    paddingHorizontal: ms(16),
    borderRadius: ms(8),
    backgroundColor: Colors.white,
    shadowColor: Colors.shadowColor,
    shadowOffset: {width: -1, height: 2},
    shadowOpacity: 0.2,
    shadowRadius: 3,
    elevation: 3,
    rowGap: ms(15),
  },
  planInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.neutral0X,
    paddingVertical: ms(8),
    paddingHorizontal: ms(12),
    borderRadius: ms(6),
    marginBottom: ms(0),
    borderWidth: 1,
    borderColor: Colors.neutral20,
  },
});

const SavingsFormLayout: React.FC<SavingsFormLayoutProps> = ({
  title,
  onBack,
  onSubmit,
  children,
  scrollViewRef,
  suggestedPlanName,
}) => {
  const defaultScrollRef = useRef<ScrollView>(null);
  const scrollRef = scrollViewRef || defaultScrollRef;

  return (
    <SafeAreaView style={[globalStyles.appContainer]}>
      <Header
        headerText={title}
        textStyle={{textTransform: 'capitalize'}}
        containerStyle={{
          paddingBottom: ms(10),
          paddingTop: ms(4),
          borderBottomWidth: ms(1),
          borderBottomColor: Colors.headerBottomColor,
        }}
        onPressBack={onBack}
        headerChild={<View style={{flex: 0.125}} />}
      />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        enabled={true}
        style={{flex: 1, paddingHorizontal: wp(10), paddingTop: ms(14)}}>
        <View style={styles.content}>
          <ScrollView
            ref={scrollRef}
            showsVerticalScrollIndicator={false}
            keyboardShouldPersistTaps="handled"
            contentContainerStyle={[{rowGap: ms(20)}]}>
            {suggestedPlanName && <SuggestedPlanInfo planName={suggestedPlanName} />}
            {children}
          </ScrollView>
        </View>
      </KeyboardAvoidingView>
      <View
        style={{
          paddingHorizontal: wp(20),
        }}>
        <Button
          title="Continue"
          onPress={onSubmit}
          style={{}}
        />
      </View>
    </SafeAreaView>
  );
};

export default SavingsFormLayout;