import * as React from 'react';
import {useState, setState} from 'react';
import { connect } from "react-redux";
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image } from 'react-native';
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import {Icon} from 'react-native-elements';
import CustomSafeArea from '../../components/safeArea.component.js';

const LoyaltyCardDetails = (navigation) => {

  const [drop1, setdrop1] = useState(false)
  const [drop2, setdrop2] = useState(false)
  const card = navigation.route.params

  const renderDetails = () => {
    return (
    <View>
    <View style={{flex: 0, marginTop: 5}}>
      <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
        <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop1(!drop1)}>
          <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Terms & Conditions</Text>
          <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
            <Icon color={navigation.app_theme?.theme.colors.text} name={ drop1 ? "expand-more" : "chevron-right"} color={navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : "gray"} />
          </View>
        </TouchableOpacity>
      </View>
      {drop1 ? <Text style={{fontSize: 16, height: '30%', width: '100%', marginTop: 15, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{card.terms_and_conditions}</Text> : null}  
    </View>

    <View style={{flex: 0, marginTop: 15}}>
      <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
        <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop2(!drop2)}>
          <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>FAQs</Text>
          <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
            <Icon name={ drop2 ? "expand-more" : "chevron-right"} color={navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : "gray"} />
          </View>
        </TouchableOpacity>
      </View>
      {drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{card.faqs}</Text> : null}
    </View>
    </View>)
  }

  return (
    <CustomSafeArea>
      <CustomHeader title={card.name} navigation={navigation} onBackPress={() => navigation.navigation.goBack()} back={true} />
        <View style={{flex: 1, width: '100%', padding: 15}}>
          <Image source={{uri: card.image}} style={{width: '100%', height: Theme.screen.h / 3 - 25, borderRadius: 10, resizeMode: 'stretch'}} />
          <ScrollView style={{marginTop: 10}}>
            <Text style={{marginTop: 20, fontSize: 16, fontFamily: 'Arial', fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.darkGray}}>{card.name}</Text>
            <Text style={{marginTop: 15, fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
              {card.description}
            </Text>
            {renderDetails()}
          </ScrollView>
        </View>
    </CustomSafeArea>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(LoyaltyCardDetails)