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

export interface ISettingsState {
  siteName: string,
  routes: IRoute [],
  adminRoutes: IRoute [],
  serviceRoutes: IRoute [],
  sideMenu?: IMenuItem [],
  topMenu?: IMenuItem [],
  isLoading: boolean
}

interface RequestSettingsAction {
  type: 'REQUEST_SETTINGS'
}

interface ReceiveSettingsAction {
  type: 'RECEIVE_SETTINGS',
  siteName: string,
  routes: IRoute [],
  adminRoutes: IRoute [],
  serviceRoutes: IRoute [],
  sideMenu?: IMenuItem [],
  topMenu?: IMenuItem [],
}

type KnownAction = RequestSettingsAction | ReceiveSettingsAction;

export const actionCreators = {
  requestSettings: (): AppThunkAction<KnownAction> => (dispatch, getState) => {
    
    dispatch({ type: 'REQUEST_SETTINGS' })

    const appState = getState()

    const siteName = "MAKS-IT"

    const routes : IRoute[] = [
      { path: "/", component: "Home" },
      { path: "/home", component: "Home" },
      { path: "/shop",
        childRoutes: [
          {
            path: "",
            component: "ShopCatalog"
          },
          {
            path: ":page",
            childRoutes: [
              {
                path: ":slug",
                component: "ShopItem"
              }
            ]
          }
        ]
      },
     
      { 
        path: "/blog",
        childRoutes: [
          {
            path: "",
            component: "BlogCatalog"
          },
          {
            path: ":page",
            component: "BlogCatalog"
          },
          {
            path: ":page",
            childRoutes: [
              {
                path: ":slug",
                component: "BlogItem"
              }
            ]
          }
        ]
      }
    ]

    const adminRoutes : IRoute [] = [
      { path: "/admin", component: "AdminHome" },

      { path: "/counter", component: "Counter" },
      { path: "/fetch-data", component: "FetchData",
        childRoutes: [
          {
            path: ":startDateIndex",
            component: "FetchData"
          }
        ]
      }
    ]

    const serviceRoutes : IRoute[] = [
      { path: "/signin", component: "Signin" },
      { path: "/signup", component: "Signup" }
    ]

    const sideMenu : IMenuItem [] = [
      {
        icon: "alert-triangle",
        title: "Home",
        target: "/admin"
      },
      {
        icon: "activity",
        title: "Page",
        items: [
          {
            icon: "activity",
            title: "Page 1",
            target: "/Page-1",
          },
          {
            icon: "activity",
            title: "Page 2",
            target: "/Page-2",
          },
        ]
      },
      {
        icon: "",
        title: "Counter",
        target: "/counter",
      },
      {
        icon: "",
        title: "Fetch data",
        target: "/fetch-data"
      },
    ]

    const topMenu : IMenuItem [] = [
      {
        icon: "",
        title: "Home",
        target: "/"
      },
      {
        icon: "",
        title: "Shop",
        target: "/shop",
      },
      {
        icon: "",
        title: "Blog",
        target: "/blog"
      },
      {
        icon: "",
        title: "Signin",
        target: "/signin"
      },
      {
        icon: "",
        title: "Signout",
        target: "/signout"
      }
    ]

    dispatch({ type: 'RECEIVE_SETTINGS', siteName, routes, adminRoutes, serviceRoutes, sideMenu, topMenu })
  }
}

const unloadedState: ISettingsState = {
  siteName: "reactredux",
  routes: [],
  adminRoutes: [],
  serviceRoutes: [],
  sideMenu: [],
  topMenu: [],
  isLoading: false
}

export const reducer: Reducer<ISettingsState> = (state: ISettingsState | undefined, incomingAction: Action): ISettingsState => {
  if (state === undefined) {
    return unloadedState
  }

  const action = incomingAction as KnownAction
  switch (action.type) {
    case 'REQUEST_SETTINGS':
      return {
        siteName: state.siteName,
        routes: state.routes,
        adminRoutes: state.adminRoutes,
        serviceRoutes: state.serviceRoutes,
        sideMenu: state.sideMenu,
        topMenu: state.topMenu,
        isLoading: true
      }

    case 'RECEIVE_SETTINGS':
      return {
        siteName: action.siteName,
        routes: action.routes,
        adminRoutes: action.adminRoutes,
        serviceRoutes: action.serviceRoutes,
        sideMenu: action.sideMenu,
        topMenu: action.topMenu,
        isLoading: false
      }
  }

  return state
}