Untitled

import {
  ImageSourcePropType,
  Pressable,
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  TouchableWithoutFeedback,
  useWindowDimensions,
  View,
  ViewStyle,
  Linking,
} from 'react-native';
import React from 'react';
import {Modal, Portal, Surface} from 'react-native-paper';
import {useCompBuilderTools} from '@311/hooks';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {spacing} from '@311/config/src';
import {Palette, Spacing} from '@311/types';
import {ModalIcon} from '@311/components/src/ModalPopup/ModalIcon';
import {CustomModalIcon} from '@311/components/src/ModalPopup/CustomModalIcon';
import {Ionicons, MaterialIcons} from '@expo/vector-icons';

import {BellIcon, ClockIcon} from '@311/components/src';
import {Typography} from '@311/components/src/Typography/';
import RenderHtml from 'react-native-render-html';
import WebView from 'react-native-webview';

export interface ModalPopupProps {
  showRightButtonOnly?: boolean;
  customIconSource?: ImageSourcePropType | number;
  customIconSize?: number;
  heading?: string;
  showHeader?: boolean;
  showFooter?: boolean;
  showRightButton?: boolean;
  showLeftButton?: boolean;
  showMultilineTextButton?: boolean;
  showMultilineTextButtonOnly?: boolean;
  buttonAlign?: string;
  thumbnail?: number;
  thumbnailAlign?: string;
  headerIcon?: JSX.Element;
  closeIcon?: boolean;
  closeButtonStyle?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
  showChildrenOnly?: boolean;
  textButtonChildren?: React.ReactNode;
  buttonLabelLeft?: string;
  buttonLabelRight?: string;
  leftButtonStyle?: StyleProp<TextStyle>;
  rightButtonStyle?: StyleProp<TextStyle>;
  rightButtonLabelStyle?: StyleProp<TextStyle>;
  showBackButton?: boolean;
  backButtonContainerStyle?: StyleProp<ViewStyle>;
  footerText?: string;
  isLandScapeMode?: boolean;
  modalContentStyle?: StyleProp<ViewStyle>;
  modalBodyWithoutHeaderStyle?: StyleProp<ViewStyle>;
  footerContainerProp?: StyleProp<ViewStyle>;
  isRightButtonDisable?: boolean;
  onBackButtonPress?: () => void;
  onButtonPressLeft?: () => void;
  onButtonPressRight?: () => void;
  onMultilineTextButtonPress?: () => void;
  isVisible?: boolean;
  showModal?: () => void;
  hideModal?: () => void;
  headerIconSurfaceStyle?: StyleProp<TextStyle>;
  modalBodyContainerStyle?: StyleProp<ViewStyle>;
  headerStyles?: StyleProp<TextStyle>;
  data: any;
}

const DemoModal = (props: ModalPopupProps) => {
  const {palette, t} = useCompBuilderTools();
  const {
    customIconSource,
    customIconSize,
    heading,
    showHeader,
    showFooter,
    showRightButton,
    showLeftButton,
    showMultilineTextButton,
    showMultilineTextButtonOnly,
    buttonAlign,
    thumbnail,
    thumbnailAlign,
    headerIcon = <BellIcon />,
    closeIcon = false,
    closeButtonStyle,
    children,
    showChildrenOnly,
    textButtonChildren,
    buttonLabelLeft,
    buttonLabelRight = t('alternativeSRType.buttonLabelRight'),
    leftButtonStyle,
    rightButtonStyle,
    rightButtonLabelStyle,
    showBackButton,
    backButtonContainerStyle,
    footerText,
    isLandScapeMode,
    modalContentStyle,
    modalBodyWithoutHeaderStyle,
    footerContainerProp,
    isRightButtonDisable,
    onBackButtonPress,
    onButtonPressLeft,
    onButtonPressRight,
    onMultilineTextButtonPress,
    hideModal,
    showModal,
    isVisible,
    headerIconSurfaceStyle,
    modalBodyContainerStyle,
    headerStyles,
    showRightButtonOnly,
    data,
  } = props;
  const iconSize = 0;
  const showButtons = true;
  const styles = makeStyles(spacing, palette, iconSize);
  //   const ModalBody = (): JSX.Element => {
  //     return (

  //     );
  //   };
  //   const ModalFooter = () => {
  //     return (

  //     );
  //   };
  //   const ModalButtons = () => {
  //     return (

  //     );
  //   };
  console.log(props);
  const {width} = useWindowDimensions();
  const renderersProps = {
    a: {
      onPress(event, url) {
        Linking.openURL(url);
      },
    },
  };
  return (
    // <WebView originWhitelist={['*']} source={{html: data[3].message_body}} />
    <Portal theme={{colors: {backdrop: palette.inModalPopUp.backdrop}}}>
      <Modal visible={true} contentContainerStyle={styles.content}>
        {/* <View style={{width: 300, height: 400}}> */}
        <WebView
          // containerStyle
          originWhitelist={['*']}
          source={{
            html: `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">${data[0].message_body}`,
          }}
        />
        {/* </View> */}
      </Modal>
    </Portal>
  );
  return (
    <Portal theme={{colors: {backdrop: palette.inModalPopUp.backdrop}}}>
      <Modal visible={true} contentContainerStyle={styles.content}>
        {/* <ModalBody /> */}
        {/* <View style={styles.body}>
          {headerIcon && (
            <Surface style={[styles.headerIconSurface, headerIconSurfaceStyle]}>
              {headerIcon}
            </Surface>
          )}
          <View style={styles.headerContainer}>
            {/* <View>
            <View style={styles.headingContainer}>
              {heading && (
                <Typography.HeaderSubtitle
                  //   style={styles.headingText}
                  numberOfLines={2}>
                  {heading}
                </Typography.HeaderSubtitle>
              )}

              {closeIcon && (
                <Ionicons
                  onPress={hideModal}
                  name="md-close"
                  size={spacing(2)}
                  color={palette.inModalPopUp.crossIconColor}
                  accessibilityRole={'button'}
                  accessibilityLabel={t('modalPopUp.closeIconLabel')}
                  testID="Close-Icon"
                />
              )}
            </View>
            <View style={{width: spacing(37.5)}}>
              <Typography.BodySmall numberOfLines={4}>
                {
                  'Roadwork for 2 days. Alternate routes for commute have opened up via: \n1) 3434 Belt Line Villa Mobile Privet Park D..'
                }
              </Typography.BodySmall>
            </View>
            {/* </View>
          </View>
        </View>

        {/* {showFooter && <ModalFooter />}
        <View
          style={[
            styles.footerContainer,
            !showButtons && styles.addBottomRadius,
          ]}>
          <ClockIcon />
          <Typography.Small style={{marginLeft: spacing(10 / 8)}}>
            {'Time related information'}
          </Typography.Small>
        </View>
        {/* {showButtons && <ModalButtons />}
        {showButtons && (
          <View style={styles.btnsContainer}>
            <Pressable>
              <Text style={{color: '#1177C5'}}>OK</Text>
            </Pressable>
          </View>
        )} */}
        {/* {showButtons && (
          <View style={styles.btnsContainer}>
            <Pressable>
              <Text style={{color: '#1177C5'}}>OK</Text>
            </Pressable>
          </View>
        )} */}
        <WebView
          originWhitelist={['*']}
          source={{
            html: '<h1>asfasdf</h1>', //data[0].message_body,
          }}
          style={{
            flex: 1,
            backgroundColor: 'red',
            width,
          }}
        />
        <WebView
          originWhitelist={['*']}
          source={{html: '<h1>This is a static HTML source!</h1>'}}
        />
        {/* <RenderHtml
          contentWidth={width}
          baseStyle={{}}
          source={
            {html: data[0].message_body}
            // {
            // html: '<p>This is <span style="font-size: 48px;">rich text </span><span style="font-family: verdana;">alert text with Imag</span>e.<span><img src="https://qc-automation-developer-edition.na85.force.com/citizen/servlet/rtaImage?eid=a0U1U000009wXbj&feoid=00N1U0000047Eqk&refid=0EM1U000006ZvYm" alt="w3schools.jpg"></img></span></p>',
            // }
          }
          // renderersProps={renderersProps}
          tagsStyles={{
            p: {
              flexDirection: 'row',
            },
            h4: {
              width: width - 64,
              flexDirection: 'row',
            },
          }}
        /> */}
      </Modal>
    </Portal>
  );
};

export default DemoModal;

const makeStyles = (spacing: Spacing, palette: Palette, iconSize?: number) =>
  StyleSheet.create({
    content: {
      minHeight: 300,
      minWidth: 150,
      backgroundColor: palette.body.backgroundColor,
      marginHorizontal: spacing(2),
      borderRadius: spacing(1.25),
    },
    headerContainer: {
      paddingLeft: spacing(1),
    },
    headingContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: spacing(0.5),
    },
    headingText: {
      fontWeight: 'bold',
      fontSize: spacing(2.5),
      color: palette.inModalPopUp.headingTextColor,
    },
    body: {
      flexDirection: 'row',
      padding: spacing(2),
    },
    // enabledZone: {flex: 1},
    headerIconSurface: {
      borderRadius: spacing(3),
      height: spacing(5.25),
      width: spacing(5.25),
      backgroundColor: palette.icon.primary,
      justifyContent: 'center',
      alignItems: 'center',
    },
    footerContainer: {
      borderColor: '#E7EAF0',
      backgroundColor: '#F8F9FD',
      borderWidth: 1,
      flexDirection: 'row',
      paddingVertical: spacing(1.5),
      paddingHorizontal: spacing(2),
      alignItems: 'center',
    },
    addBottomRadius: {
      borderBottomLeftRadius: spacing(1.25),
      borderBottomRightRadius: spacing(1.25),
    },
    btnsContainer: {
      backgroundColor: palette.body.backgroundColor,
      padding: spacing(2),
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: spacing(2),
    },
  });

DemoModal.defaultProps = {
  showHeader: true,
  showFooter: true,
  showRightButton: true,
  showLeftButton: true,
  showMultilineTextButton: false,
  showMultilineTextButtonOnly: false,
  closeIcon: true,
  showChildrenOnly: false,
  buttonAlign: 'horizontal',
  thumbnailAlign: 'vertical,',
  customIconSize: spacing(32),
  landScapeMode: false,
  isRightButtonDisable: false,
};