import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import ProductService from '../../services/ProductService';

const initialState = {
    product:{
      data: {},
      status: 'idle',
      error: null,
    },
    products:{
      data: [],
      status: 'idle',
      error: null,
    },
    productsHistory:{
      data: [],
      status: 'idle',
      error: null,
    },
    productsSelected:[],
    ProductsSuggestion:[]
};

export const fetchProduct = createAsyncThunk(
  'product/fetchProduct',
  async (pid) => {
    
    const response = await ProductService.getProduct(pid)
    return response

  }
)

export const fetchProducts = createAsyncThunk(
  'product/fetchProducts',
  async () => {

    const response = await ProductService.getProducts()
    return response

  }
)

export const fetchProductsByCollection = createAsyncThunk(
  'product/fetchProductsByCollection',
  async ({collectionId}) => {
    
    const response = await ProductService.getProductsByCollection(collectionId)
    return response

  }
)

export const fetchProductsByTags = createAsyncThunk(
  'product/fetchProductsByTags',
  async ({tag}) => {
    const response = await ProductService.getProductsByTags(tag)
    console.log(response)
    return response

  }
)


export const productSlice = createSlice({
  name: 'product',
  initialState,
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.products.status = 'loading';
        state.products.error = null;
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.products.status = 'succeeded';
        state.products.data = action.payload
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.products.status = 'failed';
        state.products.data = [];
        state.products.error = action.error.message;
      })
      .addCase(fetchProduct.pending, (state) => {
        state.product.status = 'loading';
        state.product.error = null;
      })
      .addCase(fetchProduct.fulfilled, (state, action) => {
        state.product.status = 'succeeded';
        state.product.data = action.payload
      })
      .addCase(fetchProduct.rejected, (state, action) => {
        state.product.status = 'failed';
        state.product.data = {};
        state.product.error = action.error.message;
      })
      .addCase(fetchProductsByCollection.pending, (state) => {
        state.products.status = 'loading';
        state.products.error = null;
      })
      .addCase(fetchProductsByCollection.fulfilled, (state, action) => {
        state.products.status = 'succeeded';
        state.products.data = action.payload
      })
      .addCase(fetchProductsByCollection.rejected, (state, action) => {
        state.products.status = 'failed';
        state.products.data = [];
        state.products.error = action.error.message;
      })
      .addCase(fetchProductsByTags.pending, (state) => {
        state.products.status = 'loading';
        state.products.error = null;
      })
      .addCase(fetchProductsByTags.fulfilled, (state, action) => {
        state.products.status = 'succeeded';
        state.products.data = action.payload
      })
      .addCase(fetchProductsByTags.rejected, (state, action) => {
        state.products.status = 'failed';
        state.products.data = [];
        state.products.error = action.error.message;
      })
  }
});


export default productSlice.reducer;
