import React, { useEffect } from "react";
import {
  View,
  Dimensions,
  ScrollView,
  SafeAreaView,
  Platform,
  StatusBar,
  Text,
} from "react-native";
import { connect } from "react-redux";
import { faq } from "../../redux/actions";

//style
import tw from "tailwind-rn";
import Colors from "../../constants/Colors";

//components
import Header from "../../components/Header";
import Navbar from "../../components/Navbar";
import Search from "../../components/Search";
import Instance from "./components/Instance";

//assets
import bgFaq from "./assets/faq.png";

const { width, height } = Dimensions.get("window");

function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
  useEffect(() => {
    getFaq();
  }, []);

  return (
    <SafeAreaView
      style={{
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
        position: "relative",
        backgroundColor: "white",
      }}
    >
      <Navbar
        headerOptions={{
          logo: false,
          menu: false,
          hamburgerMenu: false,
          title: "",
          bookmark: false,
          qr: true,
          back: true,
          backgroundColor: Colors.theme1["light"].greenCF + "0F",
        }}
      />
      <Header
        background={bgFaq}
        title={"پرسش‌های متداول"}
        description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
        // icon={}
      />
      <View style={tw("px-4 mb-4")}>
        <Search
          value={search}
          onChange={searchFaq}
          placeholder={"بخشی از پرسش خود را اینجا بنویسید"}
        />
      </View>
      <ScrollView
        style={[tw("bg-white flex px-4 mb-4")]}
        contentContainerStyle={{ paddingBottom: height / 2.4 }}
      >
        {!search ? (
          list.length &&
          list.map((item, index) => (
            <Instance key={index} question={item} selectFaq={selectFaq} />
          ))
        ) : list.length && searchResult.length ? (
          searchResult.map((item, index) => (
            <Instance key={index} question={item} selectFaq={selectFaq} />
          ))
        ) : (
          <Text
            style={[
              tw("w-full text-center mt-10"),
              { fontFamily: "regular", fontSize: width / 24 },
            ]}
          >
            سوالی یافت نشد.
          </Text>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const mapStateToProps = (state) => ({
  list: state.faq.list,
  searchResult: state.faq.searchResult,
  search: state.faq.search,
});

const mapDispatchToProps = {
  getFaq: faq.list,
  selectFaq: faq.selectFaq,
  searchFaq: faq.searchFaq,
};

export default connect(mapStateToProps, mapDispatchToProps)(Faq);