import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { useValues } from '../../../../utils/context'
import styles from './styles'
import appColors from '../../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../../theme/appConstant'
import Icons from '../../../../utils/icons/icons'

interface TitleViewProps {
  title: string
  subTitle: string
  primary?: boolean
  onPress?: () => void
  selected?: boolean
  translateData?: any
  showPrimaryText?: boolean
}

export function TitleView({
  title,
  subTitle,
  primary,
  onPress,
  selected,
  translateData,
  showPrimaryText = true,
}: TitleViewProps) {
  const { textRtlStyle, isDark, viewRtlStyle, rtl } = useValues()

  return (
    <View>
      <View style={[{ flexDirection: viewRtlStyle }, styles.view]}>
        <Text
          style={[
            styles.main,
            {
              color: isDark ? appColors.white : appColors.subFont,
              textAlign: textRtlStyle,
            },
          ]}
        >
          {title}
        </Text>

        {primary && (
          <TouchableOpacity
            onPress={onPress}
            activeOpacity={0.7}
            style={[
              { flexDirection: viewRtlStyle },
              styles.view,
              { marginTop: windowHeight(0.5) },
            ]}
          >
            <View style={{ marginTop: windowHeight(1) }}>
              <View
                style={[
                  styles.round,
                  {
                    borderColor: selected
                      ? appColors.online
                      : isDark
                      ? appColors.darkborder
                      : appColors.loader,
                  },
                  {
                    backgroundColor: selected
                      ? appColors.online
                      : isDark
                      ? appColors.primaryFont
                      : appColors.white,
                  },
                ]}
              >
                {selected && <Icons.Check color={appColors.white} />}
              </View>
            </View>
            {showPrimaryText && (
              <Text
                style={[
                  styles.sub,
                  { textAlign: textRtlStyle },
                  {
                    color: appColors.iconColor,
                    marginBottom: 0,
                    fontSize: fontSizes.FONT4,
                    marginLeft: rtl ? 0 : windowWidth(-2),
                    marginRight: rtl ? windowWidth(-2) : 0,
                  },
                ]}
              >
                {translateData?.setPrimary}
              </Text>
            )}
          </TouchableOpacity>
        )}
      </View>

      <Text style={[styles.sub, { textAlign: textRtlStyle }]}>{subTitle}</Text>
    </View>
  )
}
