import React, { useState } from 'react'
//components
import ModalAddItem from '../../modals/groceries/ModalAddItem'
import ModalAddList from '../../modals/groceries/ModalAddList'
//styles
import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperSelect, PlusIcon, MenuIcon, RemoveIcon, CheckIcon, ListIcon } from './styles/buttons'
//redux
import { useSelector, useDispatch } from 'react-redux'
import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'

if (
    Platform.OS === "android" &&
    UIManager.setLayoutAnimationEnabledExperimental
) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
}

const SelectAllItemsButton = (props) => {
    const dispatch = useDispatch()
    const listId = useSelector(selectOpenListId)
    const [toggleAnim, setToggleAnim] = useState(false)
    const handlePress = () => {
        listId && dispatch(checkAll(listId));
        listId && setToggleAnim(!toggleAnim)
    }
    return (
        <WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
            <CheckIcon />
        </WrapperSelect>
    )
}
const RemoveItemsButton = (props) => {
    const dispatch = useDispatch()
    const [toggleAnim, setToggleAnim] = useState(false)
    const handlePress = () => {
        Alert.alert(
            "Warning",
            "Are you sure you want to remove the selected items?",
            [
                { text: "Cancel", },
                {
                    text: "Remove", onPress: () => {
                        dispatch(itemsRemoved())
                        setToggleAnim(!toggleAnim)
                    }
                }
            ],
            { cancelable: true, }
        )
    }
    return (
        <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
            <RemoveIcon />
        </WrapperRemove>
    )
}

export const ContainerButtons = (props) => {
    const [visible, setVisible] = useState(false);
    const toggleAnimation = () => {
        LayoutAnimation.configureNext({
            duration: 500,
            create: { type: 'linear', property: 'opacity' },
            update: { type: 'spring', springDamping: 0.8 },
            delete: { type: 'linear', property: 'opacity' }
        })
        setVisible(!visible)
    }
    return (
        <>
            <SelectAllItemsButton visible={visible} />
            <RemoveItemsButton visible={visible} />
            <WrapperButtons toggle={visible} onPress={toggleAnimation}>
                <MenuIcon />
            </WrapperButtons >
        </>
    )
}

export const AddItemButton = (props) => {
    const [visibleItem, setVisibleItem] = useState(false);
    const [visibleList, setVisibleList] = useState(false);
    const lists = useSelector(state => state.lists.entities)
    if (lists.find((list) => list.open === true)) {
        return (
            <>
                <WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
                    <PlusIcon />
                    <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
                </WrapperAddItem>
            </>
        )
    }
    return (
        <>
            <WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
                <ListIcon />
            </WrapperAddList>
            <ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
        </>
    )
}