// React dependencies
import React, { useState, useEffect } from "react";
import { ScrollView } from "react-native";

// Screen Icon
import EmptyIcon from "../../assets/Shocked.png";

// Higher-order-components
import { withTheme } from "styled-components";
import { NavigationEvents } from "react-navigation";

// Stateless components
import Empty from "../Components/UI/States/Empty";
import ActionButton from "../Components/UI/Action-Blocks/ActionButton";
import Modal from "../Components/UI/Modal";
import ShoppingListCard from "../Components/UI/Cards/ShoppingLists/ShoppingList";
import Loading from "../Components/UI/States/Loading";
import { TextInput } from "react-native-paper";

/*
Context API Consumer:
- Wraps the entire component, Consumer then renders the children (This components JSX)
- When using the <Consumer> component you can access the value which has access to the entire state and the dispatch method

Usage:

<Consumer>
  {value => {
    <Text colour={value.isDark : "White" : "Black"}> Hello </Text>
  }}
</Consumer>
*/
import { Consumer } from "../Context";
import { getItem, setItem } from "../Utils/AsyncStorage";

// Utility libraries
import shortid from "shortid";
import moment from "moment";

const ShoppingLists = props => {
  const [
    isCreateShoppingModalVisible,
    setIsCreateShoppingModalVisible
  ] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [shoppingListName, setShoppingListName] = useState("");
  const [shoppingLists, setShoppingLists] = useState([]);

  useEffect(() => {
    fetchShoppingLists();
  }, []);

  const fetchShoppingLists = async () => {
    console.log("Fetching all the shopping lists avaliable");
    setIsLoading(!isLoading);
    try {
      const value = await getItem("ShoppingLists");
      if (value) {
        setShoppingLists(value);
        setIsLoading(false);
      } else {
        setShoppingLists([]);
        setIsLoading(false);
      }
      console.log(value);
    } catch (e) {
      console.log(e);
    }
  };

  createShoppingList = async () => {
    setIsLoading(!isLoading);

    // Material colours
    const red = "#e53935"; // Red with a shade of 500
    const green = "#43a047"; // Green with a shade of 500
    const blue = "#2196f3"; // Blue with a shade of 500
    const purple = "#9c27b0"; // Purple with a shade of 500

    const shoppingListThemes = [red, blue, green, purple];
    let randomTheme =
      shoppingListThemes[Math.floor(Math.random() * shoppingListThemes.length)];

    try {
      let shoppingListData = {
        id: shortid.generate(),
        name: shoppingListName,
        createdOn: moment().format("Do MMMM YYYY"),
        shoppingListTheme: randomTheme,
        items: []
      };

      // After updating this state I want to update local storage
      //  This hook is used to update the state on load and when creating the shopping list. I only want to update the shopping list sotrage after calling this function
      setShoppingLists([...shoppingLists, shoppingListData]);


      setIsCreateShoppingModalVisible(false);
      setShoppingListName("");
      setIsLoading(false);
    } catch (err) {
      console.log(err);
    }
  };

  if (isLoading) {
    return (
      <Consumer>
        {value => {
          return <Loading isDark={value.isDark} />;
        }}
      </Consumer>
    );
  }

  return (
    <Consumer>
      {value => {
        return (
          <>
            {/* <NavigationEvents onDidFocus={fetchShoppingLists} /> */}

            <Modal
              isDark={value.isDark}
              visible={isCreateShoppingModalVisible}
              title="Create a shopping list"
              onDismiss={() =>
                setIsCreateShoppingModalVisible(!isCreateShoppingModalVisible)
              }
              onCancel={() => {
                setIsCreateShoppingModalVisible(!isCreateShoppingModalVisible);
                setShoppingListName("");
              }}
              onOk={() => createShoppingList()}
              submitDisabled={shoppingListName < 1 ? true : false}
            >
              <TextInput
                placeholder="Enter a shopping list name"
                value={shoppingListName}
                onChangeText={value => setShoppingListName(value)}
                underlineColor="transparent"
                mode="flat"
              />
            </Modal>

            <ScrollView
              showsHorizontalScrollIndicator={false}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                flexGrow: 1,
                backgroundColor: value.isDark
                  ? props.theme.Primary
                  : props.theme.Secondary
              }}
            >
              {shoppingLists.length < 1 ? (
                <Empty
                  image={EmptyIcon}
                  label="No shipping lists exist"
                  heading="No shopping lists exist"
                  overview="Why not try adding one ?"
                  isDark={value.isDark}
                />
              ) : (
                shoppingLists.map((data, index) => {
                  return (
                    <ShoppingListCard
                      key={index}
                      title={data.name}
                      background={data.shoppingListTheme}
                      action={() =>
                        // Passing data to the ShoppingList component
                        props.navigation.navigate("ShoppingList", {
                          ShoppingList: data,
                          title: data.name
                        })
                      }
                    />
                  );
                })
              )}
            </ScrollView>

            <ActionButton
              colour="white"
              icon={isCreateShoppingModalVisible ? "remove" : "add"}
              action={() =>
                setIsCreateShoppingModalVisible(!isCreateShoppingModalVisible)
              }
            />
          </>
        );
      }}
    </Consumer>
  );
};

export default withTheme(ShoppingLists);