import React, {ReactNode} from 'react';
import {
  View,
  TouchableOpacity,
  ScrollView,
  ViewStyle,
  StyleProp,
  TextStyle,
  TextProps,
} from 'react-native';
import Text from '@components/Text';
import {Modal} from '@components/Modals';
import Button from '@components/Button';
import {useInstanceProp} from '@redux/selectors';

import {styles} from './styles';

export interface ScrollviewDialogProps {
  children?: ReactNode;
  visible?: boolean;
  onTouchOutside?: () => void;
  onAccept?: () => void;
  acceptButtonColor?: ViewStyle['backgroundColor'];
  onCancel?: () => void;
  title?: TextProps['children'];
  titleStyle?: StyleProp<TextStyle>;
  acceptText?: string;
  cancelText?: string;
  disableScroll?: boolean;
  maxHeight?: ViewStyle['maxHeight'];
  paddingHorizontal?: ViewStyle['paddingHorizontal'];
  showScrollIndicator?: boolean;
}

/**
 * @deprecated Use `_core/Modals` instead
 */
const ScrollviewDialog = ({
  children,
  visible,
  onTouchOutside,
  onAccept,
  acceptButtonColor,
  onCancel,
  title,
  titleStyle,
  acceptText,
  cancelText,
  disableScroll,
  maxHeight,
  paddingHorizontal,
  showScrollIndicator = true,
}: ScrollviewDialogProps) => {
  const color = useInstanceProp('color');

  return (
    <Modal
      visible={!!visible}
      onBackdropPress={onTouchOutside}
      contentStyle={styles.dialogContent}
      customButtons={
        <View style={styles.footerContainer}>
          {onCancel && (
            <TouchableOpacity onPress={onCancel} style={styles.cancelButton}>
              <Text>{cancelText}</Text>
            </TouchableOpacity>
          )}
          {onAccept && (
            <View style={styles.footerOptionContainer}>
              <Button
                onPress={onAccept}
                text={acceptText!}
                style={[
                  acceptButtonColor
                    ? {
                        ...styles.acceptButton,
                        backgroundColor: acceptButtonColor,
                      }
                    : {},
                ]}
              />
            </View>
          )}
        </View>
      }>
      <View style={[styles.popupContainer, {maxHeight}]}>
        {!!title && (
          <Text color={color} style={titleStyle || styles.text}>
            {title}
          </Text>
        )}
        <View>
          {disableScroll ? (
            <View style={[styles.popupContent, {paddingHorizontal}]}>
              {children}
            </View>
          ) : (
            <ScrollView showsVerticalScrollIndicator={showScrollIndicator}>
              <View style={[styles.popupContent, {paddingHorizontal}]}>
                {children}
              </View>
            </ScrollView>
          )}
        </View>
      </View>
    </Modal>
  );
};

export default ScrollviewDialog;