import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import ReactModal from 'react-modal'
import Admin from "./admin"
import configureStore from './store/store'

import BannerDetails from './components/banner-details'
import BlogDetails from './components/blog/blog-settings'
import BlogPostDetails from './components/blog/blog-post-details'
import ContentDownloadDetails from './components/content-download-details'
import CurrentUserDropDown from './components/current-user-dropdown'
import EventSeriesDetails from './components/event-series-details'
import NewEntity from './components/new-entity'
import ObjectDetails from './components/object-details'
import ObjectsIndex from './components/objects-index'
import PageDetails from './components/page-details'
import PagesIndex from './components/pages-index'
import PartialDetails from './components/partial-details'
import PartialInstances from './components/partial-instances'
import PlansIndex from './components/plans-index'
import RedirectsIndex from './components/redirects-index'
import ScheduledTaskDetails from './components/scheduled-task-details'
import ScheduledTasksIndex from './components/scheduled-tasks-index'
import SimpleDetails from './components/simple-details'
import StandardIndex from './components/standard-index'
import TemplateDetails from './components/template-details'
import TemplatesIndex from './components/templates-index'
import TrackingLinkDetails from './components/tracking-link-details'
import TrackingLinksIndex from './components/tracking-links-index'
import UserDetails from './components/user-details'
import UsersIndex from './components/users-index'
import WebinarChat from './components/webinar-chat'
import WebinarDetails from './components/webinar-details'
import WebinarOfferDetails from './components/webinar-offer-details'
import WebinarsIndex from './components/webinars-index'

let store = configureStore();

$(document).ready(() => {
  ReactModal.setAppElement(document.body);

  if ($('#banner-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <BannerDetails />
      </Provider>,
      document.getElementById("banner-details")
    );
  }
  if ($('#banners-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName='banner'
          columns={ ['name', 'bannerKey'] }
          columnHeaders={ ['Name', 'Type'] }
          modalRows={ 1 }
          modalDimensions={ { width: 900 } }
        >
          <NewEntity
            initialEntity={ { name: '' } }
            columnHeaders= { ['Name', 'Type'] }
            fetchData={ ['bannerKeys'] }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("banners-index")
    );
  }
  if ($('#blog-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <BlogDetails />
      </Provider>,
      document.getElementById("blog-details")
    );
  }
  if ($('#blog-post-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <BlogPostDetails />
      </Provider>,
      document.getElementById("blog-post-details")
    );
  }
  if ($('#blog-posts-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="blogPost"
          columns={ ["dateParsed", "title", "url", "author"] }
          columnHeaders={ ['Date', '', '', ''] }
          columnTimestamps={ ['dateTimestamp', '', '', ''] }
          columnWidths={ [115, null, null, null] }
          ellipses={ [null, 50, 45, null] }
          modalRows={ 2 }
          modalDimensions={ { width: 1000 } }
        >
          <NewEntity
            initialEntity={ { title: "", titleText: "", date: "", authorId: Admin.currentUser.id } }
            redirect={ true }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("blog-posts-index")
    );
  }
  if ($('#content-download-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <ContentDownloadDetails />
      </Provider>,
      document.getElementById("content-download-details")
    );
  }
  if ($('#content-downloads-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="contentDownload"
          directory="content_downloads"
          columns={ ["name", "landingPageSlug"] }
          ellipses={ [50, 50] }
          modalRows={ 2 }
          modalDimensions={ { width: 1000 } }
        >
          <NewEntity
            initialEntity={ { name: "", contentCategoryId: "", contentFunnelStageId: "", contentScore: "" } }
            fetchData={ ["contentCategoryIds", "contentFunnelStageIds"] }
            redirect={ true }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("content-downloads-index")
    );
  }
  if ($('#current-user-dropdown')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <CurrentUserDropDown />
      </Provider>,
      document.getElementById("current-user-dropdown")
    );
  }
  if ($('#event-series-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <EventSeriesDetails />
      </Provider>,
      document.getElementById("event-series-details")
    );
  }
  if ($('#event-series-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="eventSeries"
          entityNamePlural="eventSeries"
          directory="event_series"
          columns={ ["name", "startDate", "endDate"] }
          modalRows={ 1 }
          modalDimensions={ { width: 900 } }
        >
          <NewEntity
            initialEntity={ { name: '' } }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("event-series-index")
    );
  }
  if ($('#feature-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <SimpleDetails
          entityName='feature'
          initialEntity={ { text: '' } }
          fields={ [[
            { columnWidth: 12, entity: 'feature', property: 'text' }
          ]] }
          customDeletePath='admin/plans'
        />
      </Provider>,
      document.getElementById("feature-details")
    );
  }
  if ($('#features-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="feature"
          columns={ ["text"] }
          modalRows={ 1 }
          modalDimensions={ { width: 800 } }
        >
          <NewEntity
            initialEntity={ { text: "" } }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("features-index")
    );
  }
  if ($('#object-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <ObjectDetails />
      </Provider>,
      document.getElementById("object-details")
    );
  }
  if ($('#objects-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <ObjectsIndex />
      </Provider>,
      document.getElementById("objects-index")
    );
  }
  if ($('#pages-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <PagesIndex />
      </Provider>,
      document.getElementById("pages-index")
    );
  }
  if ($('#page-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <PageDetails />
      </Provider>,
      document.getElementById("page-details")
    );
  }
  if ($('#partials-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="partial"
          columns={ ["name", "instances", "devsOnly"] }
          modalRows={ 1 }
          modalDimensions={ { width: 800 } }
        >
          <NewEntity
            initialEntity={ { name: '' } }
            redirect={ true }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("partials-index")
    );
  }
  if ($('#partial-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <PartialDetails />
      </Provider>,
      document.getElementById("partial-details")
    );
  }
  if ($('#partial-instances')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <PartialInstances />
      </Provider>,
      document.getElementById("partial-instances")
    );
  }
  if ($('#plans-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <PlansIndex />
      </Provider>,
      document.getElementById("plans-index")
    );
  }
  if ($('#redirects-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <RedirectsIndex />
      </Provider>,
      document.getElementById("redirects-index")
    );
  }
  if ($('#redirect-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <SimpleDetails
          entityName='redirect'
          initialEntity={ { url: '', redirect: '', active: true, statusCode: '301' } }
          staticData={ {
            statusCodes: [
              { text: '301' },
              { text: '302' }
            ]
          } }
          fields={ [[
            { columnWidth: 4, entity: 'redirect', property: 'url', columnHeader: 'Redirect From' },
            { columnWidth: 4, entity: 'redirect', property: 'redirect', columnHeader: 'Redirect To' },
            { columnWidth: 2, entity: 'redirect', property: 'active', type: 'booleanDropdown' },
            { columnWidth: 2, entity: 'redirect', property: 'statusCode', type: 'dropdown', optionLabel: 'text', optionValue: 'text' }
          ]] }
        />
      </Provider>,
      document.getElementById("redirect-details")
    );
  }
  if ($('#scheduled-task-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <ScheduledTaskDetails />
      </Provider>,
      document.getElementById("scheduled-task-details")
    );
  }
  if ($('#scheduled-tasks-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <ScheduledTasksIndex />
      </Provider>,
      document.getElementById("scheduled-tasks-index")
    );
  }
  if ($('#template-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <TemplateDetails />
      </Provider>,
      document.getElementById("template-details")
    );
  }
  if ($('#templates-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <TemplatesIndex />
      </Provider>,
      document.getElementById("templates-index")
    );
  }
  if ($('#tooltip-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <SimpleDetails
          entityName='tooltip'
          initialEntity={ { text: '' } }
          fields={ [[
            { columnWidth: 12, entity: 'tooltip', property: 'text' }
          ]] }
          customDeletePath='admin/plans'
        />
      </Provider>,
      document.getElementById("tooltip-details")
    );
  }
  if ($('#tooltips-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <StandardIndex
          entityName="tooltip"
          columns={ ["text"] }
          ellipses={ [100] }
          modalRows={ 1 }
          modalDimensions={ { width: 800 } }
        >
          <NewEntity
            initialEntity={ { text: "" } }
          />
        </StandardIndex>
      </Provider>,
      document.getElementById("tooltips-index")
    );
  }
  if ($('#tracking-link-copy')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <TrackingLinkDetails new={ true } copy={ true } />
      </Provider>,
      document.getElementById("tracking-link-copy")
    );
  }
  if ($('#tracking-link-details')[0]) {
    let trackingLinkElement = document.getElementById("tracking-link-details");
    ReactDOM.render(
      <Provider store={ store }>
        <TrackingLinkDetails id={ trackingLinkElement.dataset.entityId } />
      </Provider>,
      trackingLinkElement
    );
  }
  if ($('#tracking-link-new')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <TrackingLinkDetails new={ true } />
      </Provider>,
      document.getElementById("tracking-link-new")
    );
  }
  if ($('#tracking-links-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <TrackingLinksIndex />
      </Provider>,
      document.getElementById("tracking-links-index"));
  }
  if ($('#user-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <UserDetails />
      </Provider>,
      document.getElementById("user-details")
    );
  }
  if ($('#users-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <UsersIndex />
      </Provider>,
      document.getElementById("users-index")
    );
  }
  if ($('#webinar-chat')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <WebinarChat />
      </Provider>,
      document.getElementById("webinar-chat")
    );
  }
  if ($('#webinar-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <WebinarDetails />
      </Provider>,
      document.getElementById("webinar-details")
    );
  }
  if ($('#webinars-index')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <WebinarsIndex />
      </Provider>,
      document.getElementById("webinars-index")
    );
  }
  if ($('#webinar-offer-details')[0]) {
    ReactDOM.render(
      <Provider store={ store }>
        <WebinarOfferDetails />
      </Provider>,
      document.getElementById("webinar-offer-details")
    );
  }
});