import React, { forwardRef, useImperativeHandle } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { DetailButtonProps, DetailButtonInstance } from './interface';
import createStyles from './styles/texts.style';
import Popup from '../Popup';
import Button from '../Button';
import { Fill } from '../Button/enum';
import { useTheme } from '../Theme';

const DetailButton = forwardRef<DetailButtonInstance, DetailButtonProps>(
  (props, ref) => {
    const { showBullets, texts, popupTitle, showMoreText, popupUseNative } =
      props;
    const token = useTheme();
    const styles = createStyles(token);
    const [visible, setVisible] = React.useState(false);

    useImperativeHandle(ref, () => ({
      hideModal: () => setVisible(false),
    }));

    const onActionPress = (fn?: () => void) => {
      const res = fn?.() ?? true;
      res && setVisible(false);
    };

    return (
      <View>
        <Button fill={Fill.link} onPress={() => setVisible(true)}>
          {showMoreText}
        </Button>
        <Popup
          visible={visible}
          position="bottom"
          useNative={popupUseNative}
          round
          safeAreaInsetBottom={true}
          onClosed={() => setVisible(false)}
          onPressOverlay={() => setVisible(false)}
          style={styles.popupWrapper}
        >
          <Popup.Header
            title={<Text style={styles.title}>{popupTitle}</Text>}
            onCancel={() => setVisible(false)}
            showConfirmButton={false}
            headerStyle={styles.headerWrapper}
          />
          <ScrollView style={styles.scrollView}>
            {texts?.map((item, index) => (
              <View style={styles.listItem} key={index}>
                {showBullets && <View style={styles.dot} />}
                <Text style={styles.text}>
                  {item.content}
                  {item.actionName ? (
                    <>
                      <Text>&nbsp;</Text>
                      <Text
                        onPress={() => onActionPress(item.onActionPress)}
                        style={styles.popupText}
                      >
                        {item.actionName}
                      </Text>
                    </>
                  ) : null}
                </Text>
              </View>
            ))}
          </ScrollView>
        </Popup>
      </View>
    );
  }
);

export default DetailButton;