import React, { useState } from 'react'
import { View, Text, Modal, useWindowDimensions } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { StyledHTML } from './StyledHTML'
import { TopCloseXButton } from './TopCloseXButton'

export const InfoModal: React.FC<{
  body: { type: 'string'; text: string } | { type: 'html'; html: string }
  title: string
  children: (close: () => void) => React.ReactNode
}> = ({ title, body, children }) => {
  const [modalIsOpen, setModalIsOpen] = useState(false)
  const windowWidth = useWindowDimensions().width

  return (
    <>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalIsOpen}
        onRequestClose={() => {
          setModalIsOpen(false)
        }}
      >
        <View
          style={{
            flex: 1,
            paddingTop: 44,
            paddingBottom: 41,
            paddingHorizontal: 16,
            backgroundColor: '#2a3138',
          }}
        >
          <View
            style={{
              alignItems: 'flex-end',
            }}
          >
            <TopCloseXButton onPress={() => setModalIsOpen(false)} />
          </View>

          <ScrollView>
            <Text
              style={{
                ...TextStyles.h4,
                color: colors.midWhite,
                marginBottom: 10,
              }}
            >
              {title}
            </Text>
            {body.type === 'string' ? (
              <Text style={{ ...TextStyles.body, color: colors.metals.metal0 }}>
                {body.text}
              </Text>
            ) : (
              <StyledHTML html={body.html} contentWidth={windowWidth} />
            )}
          </ScrollView>
        </View>
      </Modal>
      {children(() => {
        setModalIsOpen(true)
      })}
    </>
  )
}