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

//styles
import {
    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck
} from '../styles/modal'
import {
    StyledImage, IconProduct, IconTag, IconDollar, IconLink
} from './styles/addProduct'
//redux
import { useDispatch, useSelector } from 'react-redux';
import { productAdded } from '../../../redux/slices/groceryList/productsSlice';

export const ModalAddProduct = (props) => {
    const dispatch = useDispatch()
    const tags = useSelector(state => state.tags.entities)
    const [productName, setProductName] = useState('');
    const [tag, setTag] = useState('');
    const [price, setPrice] = useState('');
    const [image, setImage] = useState('');

    const [focused, setFocused] = React.useState(false)
    // const handleKeyDown = (event) => {
    //     if (event.key === 'Enter' && productName !== '') {
    //         setProductName('')
    //         dispatch(addNewProduct({ productName, tag: 'Vegetables & fruit', price: 5, image: 'https://media-cdn.tripadvisor.com/media/photo-s/15/2d/23/07/domino-s-pizza.jpg' }))
    //     }
    // }
    const handleSubmit = () => {
        if (props.visible && productName) {
            dispatch(productAdded({ productName, tag: tags.find(t => t.tagName === tag) ? tag : "uncategorized", price, image }));
            setProductName('');
            setTag('');
            setPrice('');
            setImage('');
            props.closeModal();
        }
        else {
            alert('You should give a valid product name');
        }
    }
    return (
        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
            <ModalHeader>Add product</ModalHeader>
            <WrapperInput>
                <IconProduct />
                <InputSmall type="text"
                    value={productName}
                    onChange={(text) => setProductName(text.target.value)}
                    // onKeyDown={(event) => handleKeyDown(event)}
                    placeholder="Product name" />
                {productName ? <IconCheck /> : <IconWrong />}
            </WrapperInput>
            <WrapperInput>
                <IconTag />
                <InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                    type="text"
                    value={tag}
                    onChange={(text) => setTag(text.target.value)}
                    placeholder="Tag" />
                {tag ? <IconCheck /> : <IconWrong />}
            </WrapperInput>
            {focused && <WrapperDropdown>
                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
            </WrapperDropdown>}
            <WrapperInput>
                <IconDollar />
                <InputSmall type="number"
                    value={price}
                    onChange={(text) => setPrice(text.target.value)}
                    placeholder="Price" />
            </WrapperInput>
            <WrapperInput>
                <IconLink />
                <InputSmall type="text"
                    value={image}
                    onChange={(text) => setImage(text.target.value)}
                    placeholder="Image link" />
            </WrapperInput>
            {image && <StyledImage src={image} alt={'No link...'} />}
            <WrapperButtons>
                <Button onClick={props.closeModal}>Close</Button>
                <VerticalSeperator />
                <Button onClick={() => handleSubmit()}>Add  </Button>
            </WrapperButtons>
        </StyledModal>
    )
}