import React, { useState } from 'react'
import styled from "styled-components"
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import { useDispatch, useSelector } from 'react-redux'
import { findRecipeById } from '../../../redux/slices/recipesSlice'

//styles
import {
    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
} from '../styles/modal'
import Ingredient from '../../recipes/Ingredient&Button'
import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
import Dropdown from '../../Dropdown'
import theme from '../../../styles/theme';
import { Text } from 'react-native';

const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />

const IconMeal = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={16} />

const ModalAddIngredients = (props) => {
    const dispatch = useDispatch()
    const recipe = useSelector(state => findRecipeById(state, props.id))
    let amountOfServings = recipe.servings ? recipe.servings : 1
    const lists = useSelector(state => state.lists.entities)
    const [listName, setListName] = useState('')
    const [focused, setFocused] = useState(false)
    const [servings, setServings] = useState(amountOfServings)
    let servingsMultiplier = Math.ceil(servings / amountOfServings)
    const IngredientsList = recipe.ingredients.map((ingredient, index) => {
        return (
            <Ingredient key={index} recipeId={recipe._id} multiplier={servingsMultiplier} ingredient={ingredient} />
        )
    })

    const handleSubmit = () => {
        if (lists.find(list => list.listName === listName) && recipe.ingredients.find(ingredient => ingredient.checked)) {
            console.log('were sending the ingredients baby')
            recipe.ingredients.forEach(ingredient => ingredient.checked === true && dispatch(itemAdded({
                productName: ingredient.productName,
                amount: {
                    am: ingredient.amount * servingsMultiplier,
                    qt: ingredient.portion,
                },

                tag: ingredient.tag,
                price: ingredient.price,
                person: '',
                details: `For ${recipe.name} (${ingredient.portion}) `,
                listId: lists.find(list => list.listName === listName)._id
            })))
            props.closeModal()
        }
        else {
            alert('You should fill in a valid grocery list and/or select at least 1 ingredient')
        }
    }
    return (
        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
            onBackdropPress={props.closeModal}
            onBackButtonPress={props.closeModal}
            useNativeDriverForBackdrop
            style={{margin: 0}} >
            <Wrapper>
            <ModalHeader>Add to grocerylist</ModalHeader>
            <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
            <WrapperInput>
                <IconList />
                <Input
                    style={{ fontSize: 20 }}
                    type="text"
                    value={listName}
                    onChangeText={(text) => setListName(text)}
                    onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                    placeholder="Grocery list" />
                {listName ? <IconCheck /> : <IconWrong />}
            </WrapperInput>
            {focused && <WrapperDropdown>
                <Dropdown array={lists.map(list => list.listName)} text={listName} setElement={setListName} />
            </WrapperDropdown>
            }
            <WrapperInput>
                <IconMeal />
                <Input
                    style={{ fontSize: 20, width: 100 }}
                    keyboardType={"number-pad"}
                    value={servings}
                    onChangeText={(text) => setServings(text)}
                    min={amountOfServings}
                    step={amountOfServings}
                    placeholder="Multiplier" />
                <Text style={{ marginLeft: 5 }}>servings</Text>
            </WrapperInput>
            {IngredientsList}
            <WrapperButtons>
                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                <VerticalSeperator />
                <Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
            </WrapperButtons>
            </Wrapper>
        </StyledModal >
    )
}
export default ModalAddIngredients