import React, { useState } from 'react'
//components
import Dropdown, { QtDropdown } from '../../Dropdown'

//styles
import {
    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall
} from '../styles/modal'
import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
import { IconTag, IconDollar } from './styles/addProduct'
//redux
import { useDispatch, useSelector } from 'react-redux';
import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice';

const ModalAddItem = (props) => {
    const dispatch = useDispatch()
    const products = useSelector(state => state.products.entities)
    const tags = useSelector(state => state.tags.entities)
    const lists = useSelector(state => state.lists.entities)

    const [productName, setProductName] = useState('');
    const [amount, setAmount] = useState('');
    const [qt, setQt] = useState('')
    const [person, setPerson] = useState('');
    const [details, setDetails] = useState('');
    const [tag, setTag] = useState('');
    const [price, setPrice] = useState('');

    const [focusedProduct, setFocusedProduct] = React.useState(false)
    const [focusedQt, setFocusedQt] = React.useState(false)
    const [focusedTag, setFocusedTag] = React.useState(false)

    const handleSubmit = () => {
        if (props.visible && productName !== '') {
            let amountObj = {
                am: amount ? Number(amount) : 1,
                qt: qt
            }
            console.log(amountObj)
            let listId = lists.find((list) => list.open === true)._id
            if (tags.find(t => t.tagName === tag)) {
                dispatch(itemAdded({ productName, amount: amountObj, person, details, tag, price, listId }));
            }
            else {
                dispatch(itemAdded({ productName, amount: amountObj, person, details, tag: 'uncategorized', price, listId }));
            }
            setProductName('');
            setAmount('');
            setQt('');
            setPerson('');
            setDetails('');
            setTag('');
            setPrice('');
            props.closeModal();
        }
        else {
            alert('Fill in a valid product name');
        }
    }

    const handleDropdownPress = (pName) => {
        let product = products.find((product) => product.productName === pName);
        setProductName(product.productName)
        setTag(product.tag)
        setPrice(product.price)
    }
    return (
        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
            <ModalHeader>Add product</ModalHeader>
            {/* {product && product.image && <Image src={product.image} />} */}
            <WrapperInput>
                <IconProduct />
                <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
                    type="text"
                    value={productName}
                    onChange={(text) => setProductName(text.target.value)}
                    placeholder="Product name" />
                {productName ? <IconCheck /> : <IconWrong />}
            </WrapperInput>
            {focusedProduct && <WrapperDropdown>
                <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
            </WrapperDropdown>}
            <WrapperInput>
                <IconAmount />
                <Input style={{ width: '69%' }}
                    type="number"
                    value={amount}
                    onChange={(text) => setAmount(text.target.value)}
                    placeholder="Amount" />
                {amount ? <IconCheck /> : <IconWrong />}
                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
                    type="text"
                    value={qt}
                    onChange={(text) => setQt(text.target.value)}
                    placeholder="Qt." />
            </WrapperInput>
            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
                <QtDropdown  text={qt} setElement={setQt} />
            </WrapperDropdown>}
            <WrapperInput>
                <IconPerson />
                <Input type="text"
                    value={person}
                    onChange={(text) => setPerson(text.target.value)}
                    placeholder="For" />
            </WrapperInput>
            <WrapperInput>
                <IconDetails />
                <Input type="text"
                    value={details}
                    onChange={(text) => setDetails(text.target.value)}
                    placeholder="Additional details" />
            </WrapperInput>
            <WrapperInput>
                <IconTag />
                <Input type="text"
                    onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
                    value={tag}
                    onChange={(text) => setTag(text.target.value)}
                    placeholder="Tag" />
            </WrapperInput>
            {focusedTag && <WrapperDropdown>
                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
            </WrapperDropdown>}
            <WrapperInput>
                <IconDollar />
                <Input type="text"
                    value={price}
                    onChange={(text) => setPrice(text.target.value)}
                    placeholder="Price" />
            </WrapperInput>
            <WrapperButtons>
                <Button onClick={props.closeModal}>Close</Button>
                <VerticalSeperator />
                <Button onClick={() => handleSubmit()}>Add Item</Button>
            </WrapperButtons>
        </StyledModal >
    )
}
export default ModalAddItem