import React from 'react'
import { TouchableOpacity, View, Text, Image } from 'react-native'
import Icons from '../../../../../utils/icons/icons'
import styles from './styles'
import { DocumentPickerResponse } from 'react-native-document-picker'
import { useTheme } from '@react-navigation/native'
import appColors from '../../../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../../../theme/appConstant'
import appFonts from '../../../../../theme/appFonts'
import { useValues } from '../../../../../utils/context'
import { useSelector } from 'react-redux'

type Props = {
  uploadedDocuments: Record<string, any>
  handleDocumentUpload: (documentType: string) => void
  documentType: string
  label: string
  expiryDate?: string
  needExpiryDate?: boolean
  onPressDate?: (slug: string) => void
}

const RenderDocumentUpload = ({
  uploadedDocuments,
  handleDocumentUpload,
  documentType,
  label,
  expiryDate = '',
  needExpiryDate = false,
  onPressDate,
}: Props) => {
  const { colors } = useTheme()
  const { textRtlStyle, isDark, viewRtlStyle } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={{
        backgroundColor: colors.card,
        maxHeight: needExpiryDate ? windowHeight(32.5) : windowHeight(19),
        borderRadius: windowWidth(5),
        borderWidth: windowHeight(0.1),
        borderColor: colors.border,
        paddingBottom: windowHeight(2),
      }}
      onPress={() => handleDocumentUpload(documentType)}
    >
      <Text
        style={{
          marginTop: windowHeight(1.5),
          marginHorizontal: windowHeight(1.5),
          color: isDark ? appColors.white : appColors.black,
          fontSize: fontSizes.FONT3HALF1,
          fontFamily: appFonts.medium,
        }}
      >
        {label}
      </Text>

      {uploadedDocuments[documentType] &&
      Array.isArray(uploadedDocuments[documentType]) ? (
        (uploadedDocuments[documentType] as DocumentPickerResponse[])?.map(
          (document, index) => (
            <Image
              key={index}
              source={{ uri: document.uri }}
              style={[
                styles.innerContainerImage,
                { borderColor: colors.border },
              ]}
            />
          ),
        )
      ) : (
        <View
          style={[
            styles.innerContainer,
            { backgroundColor: colors.background },
          ]}
        >
          <View style={styles.download}>
            <Icons.Download color={appColors.secondaryFont} />
          </View>
          <Text style={styles.label}>{label}</Text>
        </View>
      )}

      {needExpiryDate && (
        <>
          <Text
            style={{
              marginTop: windowHeight(2),
              marginBottom: windowHeight(0.8),
              marginHorizontal: windowHeight(1.5),
              textAlign: textRtlStyle,
              color: colors.text,
              fontSize: fontSizes.FONT3HALF1,
              fontFamily: appFonts.medium,
            }}
          >
            {translateData?.expirydate}
          </Text>

          <TouchableOpacity
            style={{
              borderColor: isDark ? appColors.darkborder : appColors.border,
              borderWidth: windowHeight(0.15),
              width: '92.3%',
              alignSelf: 'center',
              height: windowHeight(5.5),
              borderRadius: windowHeight(25),
              paddingHorizontal: windowWidth(4),
              marginTop: windowHeight(1),
              flexDirection: viewRtlStyle,
              alignItems: 'center',
            }}
            onPress={() => onPressDate?.(documentType)}
          >
            <Icons.Calander />
            <Text
              style={{
                color: isDark ? appColors.darkText : appColors.iconColor,
                fontSize: fontSizes.FONT3HALF,
                fontFamily: appFonts.medium,
                marginHorizontal: windowWidth(2),
              }}
            >
              {expiryDate
                ? new Date(expiryDate)
                    .toLocaleDateString('en-GB', {
                      day: '2-digit',
                      month: 'short',
                      year: 'numeric',
                    })
                    .replace(/ /g, ' ')
                    .replace(',', ',')
                : translateData?.expirydate}
            </Text>
          </TouchableOpacity>
        </>
      )}
    </TouchableOpacity>
  )
}

export default RenderDocumentUpload
