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 Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import {Icon} from 'react-native-elements';

const ProductDetails = (navigation) => {

  const [drop1, setdrop1] = useState(false)
  const [drop2, setdrop2] = useState(false)

  const product = navigation.route.params.data;
  const showImage = false;
  console.log([product])

  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.colors.text}}>Application</Text>
          <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
            <Icon name={ drop1 ? "expand-more" : "chevron-right"} color="gray" />
          </View>
        </TouchableOpacity>
      </View>
      {drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{product.details[1].details[0].details}</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.colors.text}}>Benefits</Text>
          <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
            <Icon name={ drop2 ? "expand-more" : "chevron-right"} color="gray" />
          </View>
        </TouchableOpacity>
      </View>
      {drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{product.details[2].details[0].details}</Text> : null}
    </View>
    </View>)
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <CustomHeader title="" menu={false} back={true} backscreen="Products" navigation={navigation} />
      <View style={{flex: 1}}>
        {showImage ? <Image source={{uri: product.image}} style={{width: '100%', height: 250, resizeMode: 'stretch'}} /> : null}
        <View style={{flex: 1, padding: 18}}>
          <Text style={{marginBottom: 0, fontSize: 16, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.accent}}>{product.name}</Text>
          <Text style={{marginBottom: 15, fontSize: 16, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.accent}}>{product.description}</Text>
          <Text style={{fontSize: 16, marginBottom: 15, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Product Description</Text>
          <Text style={{fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{product.details[0].details[0].details}</Text>
          {product.details.length > 1 ? renderDetails() : null}
        </View>
      </View>
    </SafeAreaView>
  );
}

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

export default connect(mapStateToProps, null)(ProductDetails)