import React, { useEffect, useState } from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { configureStore, createSlice, combineReducers } from '@reduxjs/toolkit';
import { List, Input, Button } from 'antd';
import axios from 'axios';
const recipesSlice = createSlice({
  name: 'recipes',
  initialState: {
    recipeList: [],
    filteredRecipes: [],
    favoriteRecipes: [],
    searchTerm: '',
  },
  reducers: {
    setRecipes: (state, action) => {
      state.recipeList = action.payload;
      state.filteredRecipes = action.payload;
    },
    setFilteredRecipes: (state, action) => {
      state.filteredRecipes = action.payload;
    },
    addToFavorites: (state, action) => {
      state.favoriteRecipes.push(action.payload);
    },
    removeFromFavorites: (state, action) => {
      state.favoriteRecipes = state.favoriteRecipes.filter(recipe => recipe.id !== action.payload.id);
    },
    setSearchTerm: (state, action) => {
      state.searchTerm = action.payload;
    },
  },
});
const { actions: recipesActions, reducer: recipesReducer } = recipesSlice;
const rootReducer = combineReducers({
  recipes: recipesReducer,
});
const store = configureStore({
  reducer: rootReducer,
});
const RecipeApp = () => {
  const dispatch = useDispatch();
  const { recipeList, filteredRecipes, favoriteRecipes, searchTerm } = useSelector(state => state.recipes);
  const fetchRecipes = async () => {
    const response = await axios.get('https://your-recipes-api.com/recipes');
    dispatch(recipesActions.setRecipes(response.data));
  };
  useEffect(() => {
    fetchRecipes();
  }, []);
  const handleSearch = () => {
    const filtered = recipeList.filter(recipe =>
      recipe.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    dispatch(recipesActions.setFilteredRecipes(filtered));
  };
  const handleFavorite = (recipe) => {
    const isFavorite = favoriteRecipes.find(fav => fav.id === recipe.id);
    if (isFavorite) {
      dispatch(recipesActions.removeFromFavorites(recipe));
    } else {
      dispatch(recipesActions.addToFavorites(recipe));
    }
  };
  return (
    <div>
      <Input placeholder="Search recipes" value={searchTerm} onChange={(e) => dispatch(recipesActions.setSearchTerm(e.target.value))} />
      <Button type="primary" onClick={handleSearch}>Search</Button>
      <List
        dataSource={filteredRecipes}
        renderItem={recipe => (
          <List.Item key={recipe.id}>
            <List.Item.Meta
              title={recipe.name}
              description={recipe.description}
            />
            <Button onClick={() => handleFavorite(recipe)}>{favoriteRecipes.find(fav => fav.id === recipe.id) ? 'Remove from favorites' : 'Add to favorites'}</Button>
          </List.Item>
        )}
      />
      <h2>Favorite Recipes:</h2>
      <List
        dataSource={favoriteRecipes}
        renderItem={recipe => (
          <List.Item key={recipe.id}>
            <List.Item.Meta
              title={recipe.name}
              description={recipe.description}
            />
            <Button onClick={() => handleFavorite(recipe)}>Remove from favorites</Button>
          </List.Item>
        )}
      />
    </div>
  );
};
const App = () => {
  return (
    <Provider store={store}>
      <RecipeApp />
    </Provider>
  );
};
export default App;