import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  StatusBar,
  SafeAreaView,
  ScrollView,
  View,
  Platform,
  Dimensions,
} from "react-native";
import { connect, useSelector, useDispatch } from "react-redux";
import { Actions } from "react-native-router-flux";
import { ModalBox, Button } from "../common";
import { TeaserCard } from "../cards";
import { getTalent, getNewestTalent, resetGetTalentByTag } from "../Actions";
import { LinearGradient } from "expo-linear-gradient";

console.disableYellowBox = true;

const { height } = Dimensions.get("window");
const styles = StyleSheet.create({
  containerStyle: { flex: 1, backgroundColor: "#000", position: "relative" },
  wrapperStyle: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    ...Platform.select({
      ios: { height: height, paddingTop: 140 },
      android: { height: "100%", paddingTop: 120 },
    }),
  },
  scrollerWrapper: {
    flexDirection: "row",
    justifyContent: "space-around",
    flexWrap: "wrap",
    padding: 10,
  },
  btnContainer: { width: "100%", padding: 10, alignSelf: "flex-end" },
  btnStyle: {
    justifyContent: "center",
    alignSelf: "center",
    borderRadius: 30,
    height: 40,
    marginHorizontal: 10,
    backgroundColor: "#00D3FD",
    width: "100%",
    ...Platform.select({
      android: { paddingBottom: 2 },
    }),
  },
  btnTextStyle: {
    fontFamily: "Montserrat-Bold",
    fontSize: 15,
    textAlign: "center",
    color: "#FFF",
  },
});

const Home = (props) => {
  const fetchPage = 1;
  const fetchTotal = 8;
  const fetchTotalNewest = 4;

  const [profile, setProfile] = useState(false);
  const [newestTalent, setNewestTalent] = useState("");
  const [modalMessage, setModalMessage] = useState("");
  const [showModal, setShowModal] = useState(false);

  //redux state
  // const listTalent = useSelector((state) => state.talent_list);
  console.log(props, "props");
  //redux action
  const dispatch = useDispatch();
  const getTalent = (data) => dispatch(getTalent(data));

  useEffect(() => {
    if (!props.talent_list) {
      fetchData();
    }
  }, []);

  const fetchData = async () => {
    const payload = {
      page: fetchPage,
      total: fetchTotal,
    };
    getTalent(payload);
  };

  const toggleModal = () => {
    setShowModal(!showModal);
  };

  // const featured =
  //   listTalent && listTalent.length > 2 ? listTalent.slice(0, 2) : listTalent;
  // console.log(listTalent, "listTalent");
  return (
    <SafeAreaView style={styles.containerStyle}>
      <StatusBar
        backgroundColor="#000"
        barStyle="light-content"
        translucent={false}
        hidden={false}
      />
      <View style={[styles.wrapperStyle, { paddingBottom: profile ? 55 : 0 }]}>
        <ScrollView contentContainerStyle={styles.scrollerWrapper}>
          <TeaserCard
            title="Featured"
            onPress={() => Actions.Featured()}
            user={profile}
            // listData={talent_list}
          />

          {!profile ? (
            <View style={styles.btnContainer}>
              <LinearGradient
                colors={["#1B99B3", "#622dff"]}
                style={styles.btnStyle}
              >
                <Button
                  // containerStyle={styles.btnStyle}
                  textStyle={styles.btnTextStyle}
                  onPress={() => Actions.Login()}
                  title={`SIGN IN`}
                />
              </LinearGradient>
            </View>
          ) : null}

          <TeaserCard title="Newest" user={profile} listData={newestTalent} />
        </ScrollView>
      </View>
      <ModalBox
        infoText={modalMessage}
        closeModal={toggleModal}
        show={showModal}
      />
    </SafeAreaView>
  );
};

const mapStateToProps = (state) => {
  return {
    talent_list: state.talent_list,
  };
};

export default connect(mapStateToProps)(Home);