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 { LinearGradient } from "expo-linear-gradient";
import * as actUser from "../Actions";
import { API_URL } from "react-native-dotenv";
import { getTalentByTag } from "../Actions";

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 options = {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded;",
    },
  };
  const [profile, setProfile] = useState(false);
  const [actorTalent, setActorTalent] = useState("");
  const [modalMessage, setModalMessage] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [comedyTalent, setComedyTalent] = useState("");
  const [singerTalent, setSingerTalent] = useState("");
  const [movieTalent, setMovieTalent] = useState("");
  const [influencer, setInfluencer] = useState("");
  const [chefTalent, setChefTalent] = useState("");
  const [tvPresenter, setTvPresenter] = useState("");
  const [radioHost, setRadioHost] = useState("");
  const [modelTalent, setModelTalent] = useState("");
  const [athleteTalent, setAthleteTalent] = useState("");

  useEffect(() => {
    props.dispatch(actUser.getTalent({ page: fetchPage, total: 8 }));
    props.dispatch(actUser.getNewestTalent({ page: fetchPage, total: 2 }));
    fetchData();
  }, [fetchPage]);

  // const fetchActor = async () => {
  //   const url = `${API_URL}/get/search?tag=1&page=1&size=2&sort=-created_at`;
  //   const res = await fetch(url, options);
  //   const data = await res.json();
  //   setActorTalent(data.content);
  // };

  // const fetchComedy = async () => {
  //   const url = `${API_URL}/get/search?tag=2&page=1&size=2&sort=-created_at`;
  //   const res = await fetch(url, options);
  //   const data = await res.json();
  //   setComedyTalent(data.content);
  // };

  // const fetchSinger = async () => {
  //   const url = `${API_URL}/get/search?tag=3&page=1&size=2&sort=-created_at`;
  //   const res = await fetch(url, options);
  //   const data = await res.json();
  //   setSingerTalent(data.content);
  // };

  const fetchData = async () => {
    const url = `${API_URL}/get/tags`;
    const res = await fetch(url);
    const categories = await res.json();
    console.log(categories, "categories");
    categories.map(async (data) => {
      const url = `${API_URL}/get/search?tag=${data.id}&page=1&size=2&sort=-created_at`;
      const res = await fetch(url, options);
      const content = await res.json();
      data.push(content);
    });
    console.log(categories, "categories after");
  };

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

  const featured =
    props.talent_list && props.talent_list.length > 2
      ? props.talent_list.slice(0, 2)
      : props.talent_list;

  //debug

  console.log("debug");

  //end debug

  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={featured}
          />

          {!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={props.new_talent_list}
          />
          {/* {actorTalent.length !== 0 && (
            <TeaserCard
              title="Actor"
              user={profile}
              listData={actorTalent}
              onPress={() => Actions.Search({ keywords: "actor" })}
            />
          )}
          {comedyTalent.length !== 0 && (
            <TeaserCard
              title="Comedian"
              user={profile}
              listData={comedyTalent}
              onPress={() => Actions.Search({ keywords: "comedian" })}
            />
          )}
          {singerTalent.length !== 0 && (
            <TeaserCard
              title="Singer"
              user={profile}
              listData={singerTalent}
              onPress={() => Actions.Search({ keywords: "singer" })}
            />
          )}
          {movieTalent.length !== 0 && (
            <TeaserCard
              title="Movie Star"
              user={profile}
              listData={movieTalent}
              onPress={() => Actions.Search({ keywords: "Movie Star" })}
            />
          )}
          {influencer.length !== 0 && (
            <TeaserCard
              title="Influencer"
              user={profile}
              listData={influencer}
              onPress={() => Actions.Search({ keywords: "Influencer" })}
            />
          )} */}
        </ScrollView>
      </View>
      <ModalBox
        infoText={modalMessage}
        closeModal={toggleModal}
        show={showModal}
      />
    </SafeAreaView>
  );
};

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

export default connect(mapStateToProps)(Home);