import React, { useState } from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Modal,
  Pressable,
} from 'react-native'
import styles from './styles'
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 Icons from '../../../../../utils/icons/icons'
import { useSelector } from 'react-redux'

type Props = {
  uploadedDocuments: Record<string, any>
  handleDocumentUpload: (docType: string, source?: 'camera' | 'gallery') => void
  documentType: string
  label: string
  expiryDate: string | any
  needExpiryDate?: boolean
  onPressDate?: (slug: string) => void
  handlePresentModalPress: any
  setDocumnetType: any
  handleRemoveDocument: any
}

const RenderUpload: React.FC<Props> = ({
  uploadedDocuments,
  handleDocumentUpload,
  documentType,
  label,
  expiryDate,
  needExpiryDate = false,
  onPressDate,
  handlePresentModalPress,
  setDocumnetType,
  handleRemoveDocument,
}) => {
  const { colors } = useTheme()
  const { textRtlStyle, rtl, isDark } = useValues()
  const [expanded, setExpanded] = useState(false)
  const { translateData } = useSelector((state: any) => state.setting)

  return (
    <>
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => setExpanded(!expanded)}
        style={{
          backgroundColor: colors.card,
          borderRadius: windowWidth(5),
          borderWidth: windowHeight(0.15),
          borderColor: isDark ? appColors.darkborder : appColors.loader,
          paddingHorizontal: windowWidth(3),
          paddingVertical: windowHeight(2),
        }}
      >
        <View
          style={{
            flexDirection: rtl ? 'row-reverse' : 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              color: isDark ? appColors.white : appColors.black,
              fontSize: fontSizes.FONT3HALF1,
              fontFamily: appFonts.semiBold,
              writingDirection: textRtlStyle,
            }}
          >
            {label}
          </Text>
          <View
            style={{ transform: [{ rotate: expanded ? '90deg' : '0deg' }] }}
          >
            <Icons.LeftArrow
              color={isDark ? appColors.white : appColors.black}
            />
          </View>
        </View>

        {!expanded && uploadedDocuments[documentType]?.uri && expiryDate && (
          <Text
            style={{
              marginTop: windowHeight(0.5),
              color: appColors.price,
              fontSize: fontSizes.FONT3,
              fontFamily: appFonts.medium,
              writingDirection: textRtlStyle,
            }}
          >
            {translateData.complete}
          </Text>
        )}

        {expanded && (
          <View style={{ marginTop: windowHeight(2) }}>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={() => {
                setDocumnetType(documentType)
                handlePresentModalPress()
              }}
              style={{
                borderRadius: windowWidth(5),
                borderWidth: windowHeight(0.1),
                borderColor: colors.border,
                padding: windowHeight(1),
                backgroundColor: isDark
                  ? appColors.bgDark
                  : appColors.lightGray,
              }}
            >
              {uploadedDocuments[documentType]?.uri ? (
                <View>
                  <Image
                    source={{ uri: uploadedDocuments[documentType].uri }}
                    style={[
                      styles.innerContainerImage,
                      { borderColor: colors.border },
                    ]}
                  />
                  <TouchableOpacity
                    onPress={() => handleRemoveDocument(documentType)}
                    style={{
                      position: 'absolute',
                      top: 13,
                      right: 13,
                    }}
                  >
                    <Icons.Close />
                  </TouchableOpacity>
                </View>
              ) : (
                <View
                  style={[
                    styles.innerContainer,
                    { borderColor: colors.border },
                  ]}
                >
                  <View style={[styles.download]}>
                    <Icons.Download color={appColors.secondaryFont} />
                  </View>
                  <Text style={styles.label}>{label}</Text>
                </View>
              )}
            </TouchableOpacity>

            {needExpiryDate && (
              <>
                <Text
                  style={{
                    marginTop: windowHeight(2),
                    marginBottom: windowHeight(0.8),
                    color: colors.text,
                    fontSize: fontSizes.FONT3HALF1,
                    fontFamily: appFonts.semiBold,
                    textAlign: rtl ? 'right' : 'left',
                  }}
                >
                  {translateData.expiryDate}
                </Text>
                <TouchableOpacity
                  onPress={() => onPressDate?.(documentType)}
                  style={{
                    borderColor: isDark
                      ? appColors.darkborder
                      : appColors.border,
                    borderWidth: windowHeight(0.15),
                    borderRadius: windowHeight(15),
                    height: windowHeight(5.5),
                    paddingHorizontal: windowWidth(4),
                    flexDirection: rtl ? 'row-reverse' : 'row',
                    alignItems: 'center',
                  }}
                >
                  <Icons.Calander />
                  <Text
                    style={{
                      color: colors.text,
                      fontSize: fontSizes.FONT3HALF,
                      fontFamily: appFonts.regular,
                      textAlign: rtl ? 'right' : 'left',
                      marginHorizontal: windowWidth(2),
                    }}
                  >
                    {expiryDate || translateData.expiryDate}
                  </Text>
                </TouchableOpacity>
              </>
            )}
          </View>
        )}
      </TouchableOpacity>
    </>
  )
}

export default RenderUpload
