import { API_ALL_CATEGORY } from '../../utils/Config';
import { timeoutPromise } from '../../utils/Tools';

export const FETCH_ALLCATEGORY = 'FETCH_ALLCATEGORY';
export const ALLCATEGORY_LOADING = 'ALLCATEGORY_LOADING';
export const ALLCATEGORY_FAILURE = 'ALLCATEGORY_FAILURE';

export const fetchALLCategory = (id_category) => {
    const dataObj = {};
    dataObj.cat_id = id_category;
    return async (dispatch) => {
        dispatch({ type: ALLCATEGORY_LOADING });
        try {
            const response = await timeoutPromise(
                fetch(`${API_ALL_CATEGORY}`, { 
                    method: "POST",
                    headers: {
                        'Content-Type':'application/json'
                    },
                    body: JSON.stringify(dataObj)
                 })
                 .catch((error) => console.log('Error vnature'))
            );

            if (!response.ok) {
                dispatch({ type: ALLCATEGORY_FAILURE });
                throw new Error("Что-то пошло не так!, не могу получить данные(категории).");
            }
            const resData = await response.json();
            dispatch({
                type: FETCH_ALLCATEGORY,
                categories: resData
            })            
        } catch (err) {
            throw err;
        }        
    }
}

import {
    FETCH_ALLCATEGORY,
    ALLCATEGORY_FAILURE,
    ALLCATEGORY_LOADING
} from './screenCtlgCatAction';

const initialState = {
    categories: [],
    isLoading: false
};

export const screenCtlgCatReducer = (state = initialState, action) => {
    switch (action.type) {
        case ALLCATEGORY_LOADING:
            return {
                ...state,
                isLoading: true
            };
        case ALLCATEGORY_FAILURE:
            return {
                ...state,
                isLoading: false
            };
        case FETCH_ALLCATEGORY:
            return {
                ...state,
                categories: action.categories,
                isLoading: false
            };
        default:
            return state;        
    }
}

export const CatalogScreen = ({ navigation }) => {
    const dispatch = useDispatch();
    const all_ctg = useSelector((state) => state.all_categories.categories);
    const LoadingAllCat = useSelector((state) => state.all_categories.isLoading);
 //   console.log(all_ctg);
    //fetch api categories
    useEffect(() => {        
        const fetching = async() => {
            try {               
                await dispatch(fetchALLCategory(0));
            } catch (err) {
                alert(err);
            }            
        };
        fetching();        
    }, []);

    return (        
        <View style={styles.container}>
            <Header navigation={navigation} />
            { LoadingAllCat ? (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Загрузка данных...</Text>
                </View>    
            ) : (
                <FlatList 
                    data={ all_ctg }
                    keyExtractor={item => item.category_id.toString()}
                    contentContainerStyle={{
                        padding: SPACING, 
                        //paddingTop: StatusBar.currentHeight || 42
                    }}
                    renderItem={ ({ item, index }) => {
                        return (
                            <TouchableOpacity  style={{
                                    flexDirection: 'row', 
                                    padding: SPACING + 5, 
                                    marginBottom: SPACING,
                                    backgroundColor: 'rgba(255,255,255,0.8)',                                
                                    borderRadius: 12,
                                    shadowColor: Colors.black,
                                    shadowOffset: { width: 0, height: 5 },
                                    shadowOpacity: .3,
                                    shadowRadius: 20,
                                    elevation: 50
                                }}
                                onPress={() => 
                                    navigation.navigate('CatalogItemScreen', {
                                        categoryId : item.category_id,
                                        categoryTitle : item.name
                                    })
                                }
                            >
                                <Image 
                                   source={{ uri: item.thumb }}
                                   style={{
                                       width: IMAGE_SIZE, 
                                       height: IMAGE_SIZE, 
                                       borderRadius: 20,
                                       marginRight: 20
                                   }}
                                />
                                <View style={{ flex: 1, justifyContent: 'center' }}>
                                    <Text
                                        style={{
                                            fontSize: 20,
                                            fontFamily: 'Roboto-Bold'
                                        }}
                                    >
                                        { item.name }
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }}
                />
             )}
        </View>
    );
}

export const CatalogItemScreen = ({ route, navigation }) => {        
        //const { navigation, route } = this.props;
        const { categoryId, categoryTitle } = route.params;

       const dispatch = useDispatch();
       const cur_ctg = useSelector((state) => state.itemCategory.childcategory);
       const LoadingCurCat = useSelector((state) => state.itemCategory.isLoading);

        //fetch api current categories
        useEffect(() => {
            const fetching = async() => {
                try {
                    await dispatch(fetchALLCategory(categoryId));
                } catch (err) {
                    alert(err);
                }
            };
            fetching();
        }, []);       

        return (        
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >                
                <Text>CataloItemScreen - {categoryId} : {categoryTitle}</Text>
            </View>
        )    
}