import { Action, Reducer } from 'redux'
import { AppThunkAction } from '../'

import { GetShopCatalogRequestModel } from '../../models/requests'
import { GetShopCatalogResponseModel } from '../../models/responses'
import { Get } from '../../restClient'

export interface ShopCatalogState extends GetShopCatalogResponseModel {
  isLoading: boolean
}

interface RequestAction extends GetShopCatalogRequestModel {
  type: 'REQUEST_SHOP_CATALOG'
}

interface ReceiveAction extends GetShopCatalogResponseModel {
  type: 'RECEIVE_SHOP_CATALOG'
}

type KnownAction = RequestAction | ReceiveAction

export const actionCreators = {
  requestShopCatalog: (props?: GetShopCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {

    Get<Promise<GetShopCatalogResponseModel>>('https://localhost:7151/api/ShopCatalog', props?.pathParams, props?.searchParams)
      .then(response => response)
      .then(data => {
        if(data)
          dispatch({ type: 'RECEIVE_SHOP_CATALOG', ...data })
      })
    
    dispatch({ type: 'REQUEST_SHOP_CATALOG' })
  }
}

const unloadedState: ShopCatalogState = {
  totalPages: 1,
  currentPage: 1,
  items: [
    {
      id: '',
      slug: "shop-catalog-item",
      sku: "SKU-0",
      image: { src: "https://dummyimage.com/450x300/dee2e6/6c757d.jpg", alt: "..." },
      badges: [ "sale" ],
      title: "Shop item title",
      brandName: "Brand & Name",
      
      shortText: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad...",
      text: "",
      author: {
        id: '',
        image: { src: "https://dummyimage.com/40x40/ced4da/6c757d", alt: "..." },
        nickName: "Admin"
      },
      created: (new Date).toString(),

      tags: [ "react", "redux", "webapi" ],

      rating: 4.5,
      price: 20,
      newPrice: 10
    },
    {
      id: '',
      slug: "shop-catalog-item",
      sku: "SKU-0",
      image: { src: "https://dummyimage.com/450x300/dee2e6/6c757d.jpg", alt: "..." },
      badges: [ "sale" ],
      title: "Shop item title",
      brandName: "Brand & Name",
      
      shortText: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad...",
      text: "",
      author: {
        id: '',
        image: { src: "https://dummyimage.com/40x40/ced4da/6c757d", alt: "..." },
        nickName: "Admin"
      },
      created: (new Date).toString(),

      tags: [ "react", "redux", "webapi" ],

      rating: 4.5,
      price: 20,
      newPrice: 10
    },
    {
      id: '',
      slug: "shop-catalog-item",
      sku: "SKU-0",
      image: { src: "https://dummyimage.com/450x300/dee2e6/6c757d.jpg", alt: "..." },
      badges: [ "sale", "out of stock" ],
      title: "Shop item title",
      brandName: "Brand & Name",
      
      shortText: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad...",
      text: "",
      author: {
        id: '',
        image: { src: "https://dummyimage.com/40x40/ced4da/6c757d", alt: "..." },
        nickName: "Admin"
      },
      created: (new Date).toString(),

      tags: [ "react", "redux", "webapi" ],

      rating: 4.5,
      price: 20,
      newPrice: 10
    },
    {
      id: '',
      slug: "shop-catalog-item",
      sku: "SKU-0",
      image: { src: "https://dummyimage.com/450x300/dee2e6/6c757d.jpg", alt: "..." },
      badges: [ "sale" ],
      title: "Shop item title",
      brandName: "Brand & Name",
      
      shortText: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad...",
      text: "",
      author: {
        id: '',
        image: { src: "https://dummyimage.com/40x40/ced4da/6c757d", alt: "..." },
        nickName: "Admin"
      },
      created: (new Date).toString(),

      tags: [ "react", "redux", "webapi" ],

      rating: 4.5,
      price: 20,
      newPrice: 10
    }
  ],
  isLoading: false
}

export const reducer: Reducer<ShopCatalogState> = (state: ShopCatalogState | undefined, incomingAction: Action): ShopCatalogState => {
  if (state === undefined) {
    return unloadedState
  }
  
  const action = incomingAction as KnownAction
  switch (action.type) {
    case 'REQUEST_SHOP_CATALOG':
      return {
        ...state,
        isLoading: true
      }

    case 'RECEIVE_SHOP_CATALOG':
      return {
        ...action,
        isLoading: false
      }
  }

  return state
}
