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

import { GetContentRequestModel } from '../../models/requests'
import { GetContentResponseModel } from '../../models/responses'
import { Get } from '../../restClient'

export interface ContentState extends GetContentResponseModel {
  isLoading: boolean
}

interface RequestAction extends GetContentRequestModel {
  type: 'REQUEST_CONTENT'
}

interface ReceiveAction extends GetContentResponseModel {
  type: 'RECEIVE_CONTENT'
}

type KnownAction = RequestAction | ReceiveAction;

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

    Get<Promise<GetContentResponseModel>>('https://localhost:7151/api/Content/404c8232-9048-4519-bfba-6e78dc7005ca', props?.pathParams, props?.searchParams)
      .then(response => response)
      .then((data) => {
        if(data) {
          dispatch({ type: 'RECEIVE_CONTENT', ...data })
        }
      })

    dispatch({ type: 'REQUEST_CONTENT' })
  }
}

const unloadedState: ContentState = {
  siteName: "MAKS-IT",
  siteUrl: "https://maks-it.com",

  header: {
    title: `${ReservedWords.siteName}`,
    meta: {
      chartset: "utf-8",
      "google-site-verification": ""
    },
    link: {
    }
  },

  localization: {
    timeZone: "+1",
    locale: "en-US",
    dateFormat: "MMMM YYYY, dddd",
    timeFormat: "HH:mm",
    currency: "EUR",
    currencySymbol: "€"
  },
  routes: [
    { target: "/", component: "Home" },
    { target: "/home", component: "Home" },
    { target: "/shop", childRoutes: [
      { target: "", component: "ShopCatalog" },
      { target: ":page", component: "ShopCatalog" },
      { target: ":page" , childRoutes: [
        { target: ":slug", component: "ShopItem" }
      ]},
      { target:"cart", childRoutes: [
        { target: "", component: "Cart" },
        { target: "checkout", component: "Checkout" }
      ]}
    ]},
    { target: "/blog", childRoutes: [
      { target: "", component: "BlogCatalog" },
      { target: ":page", component: "BlogCatalog" },
      { target: ":page" , childRoutes: [
        { target: ":slug", component: "BlogItem" }
      ]}
    ]}
  ],
  adminRoutes: [],
  serviceRoutes: [
    { target: "/signin", component: "Signin" },
    { target: "/signup", component: "Signup" }
  ],

  topMenu: [
    { target: "/", title: "Home" },
    { target: "/shop", title: "Shop" },
    { target: "/blog", title: "Blog" },

    { target: "/signin", title: "Sing in" },
    { target: "/signup", title: "Sign up" },

    { target: "/shop/cart", icon: "shopping-cart", title: `Cart (${ReservedWords.quantity})` }
  ],
  sideMenu: [],

  homePage: {
    header: {
      title: `Home - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application home page",
      },
      link: {
        canonical: `${ReservedWords.siteUrl}`
      }
    },
    titleSection: {
      title: "Hello, World! by Redux",
      text: `<p>Welcome to your new single-page application, built with:</p>
      <ul>
        <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
        <li><a href='https://facebook.github.io/react/'>React</a> and <a href='https://redux.js.org/'>Redux</a> for client-side code</li>
        <li><a href='https://getbootstrap.com/'>Bootstrap</a>, <a href='https://reactstrap.github.io/?path=/story/home-installation--page'>Reactstrap</a> and <a href=\""https://feathericons.com/\"">Feather icons</a> for layout and styling</li>
      </ul>`
    },
    featuresSection: {
      title: "To help you get started, we have also set up:",
      items: [
        {
          icon: "navigation",
          title: "Client-side navigation",
          text: "For example, click <em>Counter</em> then <em>Back</em> to return here."
        },
        {
          icon: "server",
          title: "Development server integration",
          text: "In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file."
        },
        {
          icon: "terminal",
          title: "Efficient production builds",
          text: "In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files."
        }
      ]
    },
    testimonialsSection: {
      items: [
        {
          text: "The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>yarn</code> commands such as <code>yarn test</code> or <code>yarn install</code>.",
          reviewer: {
            id: "",
            image: { src: "https://dummyimage.com/40x40/ced4da/6c757d", alt: "..." },
            fullName: "Admin",
            position: "CEO, MAKS-IT"
          }
        }
      ]
    },
    featuredBlogsSection: {
      title: "Featured blogs"
    },
    callToActionSection: {
      title: "New products, delivered to you.",
      text: "Sign up for our newsletter for the latest updates.",
      privacyDisclaimer: "We care about privacy, and will never share your data.",
      email: {
        title: "Sign up",
        placeHolder: "Email address..."
      }
    }
  },

  shopCatalog: {
    header: {
      title: `Shop catalog - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application shop catalog",
      },
      link: {
        canonical: ""
      }
    },
    titleSection: {
      title: "Shop in style",
      text: "With this shop hompeage template"
    },
    shopItemsSection: {
      addToCart: "Add to cart"
    }
  },

  shopItem: {
    header: {
      title: `${ReservedWords.productTitle} - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application shop item",
      },
      link: {
        canonical: ""
      }
    },
    productSection: {
      availableQuantity: "Available Qty.",
      addToCart: "Add to cart"
    },
    relatedProductsSection: {
      title: "Related products",
      addToCart: "Add to cart"
    }
  },

  shopCart: {
    header: {
      title: `Shop cart - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application shop cart",
      },
      link: {
        canonical: ""
      }
    },
    titleSection: {
      title: "Shopping Cart",
      text: "<i class=\"text-info font-weight-bold\">{quantity}</i> items in your cart"
    },
    productsSection: {
      product: "Product",
      price: "Price",
      quantity: "Quantity",
      subtotal: "Subtotal:",
      continueShopping: {
        target: "/shop",
        anchorText: "Continue shopping"
      },
      checkout: {
        target: "checkout",
        anchorText: "Checkout"
      }
    }
  },

  shopCheckout: {
    header: {
      title: `Shop - checkout ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application checkout",
      },
      link: {
        canonical: ""
      }
    },
    titleSection: {
      title: "Checkout",
      text: "Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it."
    },
    billingAddressSection: {
      title: "Billing address",
      firstName: {
        title: "First name",
        placeHolder: "First name..."
      },
      lastName: {
        title: "Last name",
        placeHolder: "Last name..."
      },
      address: {
        title: "Address",
        placeHolder: "1234 Main Str.."
      },
      address2: {
        title: "Address",
        optional: "(Optional)",
        placeHolder: "1234 Main Str.."
      },
      country: {
        title: "Country",
        placeHolder: "Country..."
      },
      state: {
        title: "State",
        placeHolder: "State..."
      },
      city: {
        title: "City",
        placeHolder: "City..."
      },
      zip: {
        title: "Zip",
        placeHolder: "Zip..."
      }
    },
    shippingAddressSection: {
      title: "Shipping address",
      firstName: {
        title: "First name",
        placeHolder: "First name..."
      },
      lastName: {
        title: "Last name",
        placeHolder: "Last name..."
      },
      address: {
        title: "Address",
        placeHolder: "1234 Main Str.."
      },
      address2: {
        title: "Address",
        optional: "(Optional)",
        placeHolder: "1234 Main Str.."
      },
      country: {
        title: "Country",
        placeHolder: "Country..."
      },
      state: {
        title: "State",
        placeHolder: "State..."
      },
      city: {
        title: "City",
        placeHolder: "City..."
      },
      zip: {
        title: "Zip",
        placeHolder: "Zip..."
      }
    },
    settingsSection: {
      shippingAddressSameAsBillingAddress: "Shipping address is the same as my billing address",
      saveThisInformation: "Save this information for next time"
    },
    summarySection: {
      title: "Your cart",
      total: `Total (${ReservedWords.currency})`,
      promoCode: {
        placeHolder: "Promo code"
      },
      submit: {
        title: "Redeem"
      }
    },
    paymentSection: {
      title: "Payment",
      nameOnCard: {
        title: "Name on card",
        placeHolder: "John Doe"
      },
      cardNumber: {
        title: "Credit card number",
        placeHolder: ""
      },
      expiration: {
        title: "Expiration",
        placeHolder: "MM/YY"
      },
      cvv: {
        title: "CVV",
        placeHolder: "123"
      }
    },
    submit: {
      title: "Continue to checkout"
    }

  },

  blogCatalog: {
    header: {
      title: `Blog catalog - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application blog catalog",
      },
      link: {
        canonical: ""
      }
    },
    titleSection: {
      title: "Welcome to Blog Home!",
      text: "A Bootstrap 5 starter layout for your next blog homepage"
    },
    featuredBlogSection: {
      readTime: `${ReservedWords.date} Time to read: ${ReservedWords.readTime} min`
    },
  },

  blogItem: {
    header: {
      title: `${ReservedWords.blogTitle} - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application blog item",
      },
      link: {
        canonical: ""
      }
    },
    titleSection: {
      postedOnBy: `Posted on ${ReservedWords.date} by ${ReservedWords.nickName}`
    },
    commentsSection: {
      leaveComment: "Join the discussion and leave a comment!"
    }
    
  },

  signIn: {
    header: {
      title: `Sign in - ${ReservedWords.siteName}`,
      meta: {
        description: "Single-page application sign in",
        robots: "noindex, nofollow"
      },
      link: {
        canonical: ""
      }
    },
    title: "Sign in",
    email: {
      title: "Email address",
      placeHolder: "Email address..."
    },
    password: {
      title: "Password",
      placeHolder: "Password..."
    },
    dontHaveAnAccount: "Don't have an account yet? Please",
    signUpLink: {
      target: "/signup",
      anchorText: "Sign up"
    },
    submit: {
      title: "Sign in"
    }
  },

  signUp: {
    header: {
      title: "Sign up - {siteName}",
      meta: {
        description: "Single-page application sign up",
        robots: "noindex, nofollow"
      },
      link: {
        canonical: ""
      }
    },
    title: "Sign up",
    username: {
      title: "Username",
      placeHolder: "Username..."
    },
    email: {
      title: "Email address",
      placeHolder: "Email address..."
    },
    reEmail: {
      title: "Repeat email address",
      placeHolder: "Repeat email address..."
    },
    password: {
      title: "Password",
      placeHolder: "Password..."
    },
    rePassword: {
      title: "Repeat password",
      placeHolder: "Repeat password..."
    },
    acceptTermsAndConditions: "Accept terms and conditions",
    submit: {
      title: "Sing up"
    }
  },

  isLoading: false
}

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

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

  return state
}
