import React, { useMemo } from "react";
import { Redirect, useLocation, useParams } from "react-router-dom";
import { Text } from "components/Typography";

import Contacts from "./Pages/Contacts/Contacts";
import CampaignCreatePage from "./Pages/Campaigns/CampaignCreatePage/CampaignCreatePage";
import CampaignUpdatePage from "./Pages/Campaigns/CampaignUpdatePage/CampaignUpdatePage";
import TemplateCreate from "./Pages/Templates/TemplateCreate";
import TemplateEdit from "./Pages/Templates/TemplateEdit";
import { SegmentQueryBuilderPage } from "./Pages/Segments/SegmentQueryBuilderPage";

import { enumFromValue } from "utils/enum";
import { SegmentMode } from "@komi-app/fans-sdk";
import {
  AudienceAndCampaignsPage,
  AudienceAndCampaignsPages,
  AudienceAndCampaignsTabs,
} from "./typesUtils";

import "./Settings.scss";
import SegmentsWithCursorPage from "./Pages/Segments/SegmentsPage/SegmentsWithCursorPage";
import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";
import EmbedPage from "./Pages/Embed/EmbedPage";
import TemplatesWithCursor from "./Pages/Templates/TemplatesWithCursor";
import {
  audiencesUrl,
  campaignsUrl,
  embedUrl,
  segmentsUrl,
  templatesUrl,
} from "constants/dca";
import OmniChannelCampaigns from "./Pages/Campaigns/OmniChannelCampaignListing/OmniChannelCampaigns";

import CampaignReportPageV2 from "./Pages/Campaigns/CampaignReportPage/CampaignReportPageV2";
import EmailCampaignDetails from "./Pages/Campaigns/EmailCampaign/EmailCampaignDetails/EmailCampaignDetails";
import ContactsQuotaMessage from "./Pages/Common/ContactsQuotaMessage";

const AudienceAndCampaignsSettings = () => {
  const isEmbedOn = useFeatureIsOn(FLAGS.FEAT_CAC_305_EDCM);

  const { section: currentPage = AudienceAndCampaignsPages.Contacts } =
    useParams<{
      section: AudienceAndCampaignsPages;
    }>();

  const isRestrictedDCMForSSXOn = useFeatureIsOn(
    FLAGS.FEAT_SB_627_SSX_RESTRICTED_DCM
  );
  const isSmartSchedulingOn = useFeatureIsOn(FLAGS.SMART_SCHEDULE_TALENT);

  const location = useLocation();
  const search = new URLSearchParams(location.search);

  const locationProps = Object(location.state) as Record<string, unknown>;

  const campaignId = String(search.get("campaignId"));
  const templateId = String(search.get("templateId"));
  const type = String(search.get("type"));
  const segmentId = String(search.get("segmentId"));
  const mode = enumFromValue(String(search.get("mode")), SegmentMode);

  const contactTab = [
    {
      name: "Contacts",
      key: AudienceAndCampaignsTabs.Contacts,
      uri: audiencesUrl,
    },
  ];
  const otherTabs = [
    {
      name: "Segments",
      key: AudienceAndCampaignsTabs.Segments,
      uri: segmentsUrl,
    },
    {
      name: "Campaigns",
      key: AudienceAndCampaignsTabs.Campaigns,
      uri: campaignsUrl,
    },
    {
      name: "Templates",
      key: AudienceAndCampaignsTabs.Templates,
      uri: templatesUrl,
    },
    {
      name: "Website Embed",
      key: AudienceAndCampaignsTabs.Embed,
      uri: embedUrl,
    },
  ];
  const tabs = isRestrictedDCMForSSXOn
    ? contactTab
    : [...contactTab, ...otherTabs];

  const pages: Record<AudienceAndCampaignsPages, AudienceAndCampaignsPage> = {
    [AudienceAndCampaignsPages.Contacts]: {
      component: <Contacts />,
      tab: AudienceAndCampaignsTabs.Contacts,
    },
    [AudienceAndCampaignsPages.Segments]: {
      component: <SegmentsWithCursorPage />,
      tab: AudienceAndCampaignsTabs.Segments,
    },
    [AudienceAndCampaignsPages.Segment]: {
      component: <SegmentQueryBuilderPage mode={mode} segmentId={segmentId} />,
      tab: AudienceAndCampaignsTabs.Segments,
    },
    [AudienceAndCampaignsPages.Templates]: {
      component: <TemplatesWithCursor />,
      tab: AudienceAndCampaignsTabs.Templates,
    },
    [AudienceAndCampaignsPages.TemplatesCreate]: {
      component: <TemplateCreate {...locationProps} />,
      tab: AudienceAndCampaignsTabs.Templates,
    },
    [AudienceAndCampaignsPages.TemplatesEdit]: {
      component: <TemplateEdit templateId={templateId} />,
      tab: AudienceAndCampaignsTabs.Templates,
    },
    [AudienceAndCampaignsPages.Campaigns]: {
      component: <OmniChannelCampaigns />,
      tab: AudienceAndCampaignsTabs.Campaigns,
    },
    [AudienceAndCampaignsPages.CampaignCreate]: {
      component: isSmartSchedulingOn ? (
        <EmailCampaignDetails />
      ) : (
        <CampaignCreatePage />
      ),
      tab: AudienceAndCampaignsTabs.Campaigns,
    },
    [AudienceAndCampaignsPages.CampaignEdit]: {
      component: isSmartSchedulingOn ? (
        <EmailCampaignDetails campaignId={campaignId} type={type} />
      ) : (
        <CampaignUpdatePage campaignId={campaignId} />
      ),
      tab: AudienceAndCampaignsTabs.Campaigns,
    },
    [AudienceAndCampaignsPages.CampaignReport]: {
      component: <CampaignReportPageV2 campaignId={campaignId} />,
      tab: AudienceAndCampaignsTabs.Campaigns,
    },
    [AudienceAndCampaignsPages.Embed]: {
      component: <EmbedPage />,
      tab: AudienceAndCampaignsTabs.Embed,
    },
  };

  const page = pages[currentPage];

  // When unknown section is passed
  if (typeof page === "undefined" || !page || !page.tab) {
    return <Redirect to="/admin/not-found" />;
  }

  if (page.tab === AudienceAndCampaignsTabs.SMSCampaigns) return page.component;

  const title = useMemo(() => {
    const current = tabs.find(({ key }) => key === page.tab);

    return current ? current.name : "Audiences & Campaigns";
  }, [page]);

  return (
    <div className="audience-campaigns-container">
      <div className="header">
        <Text preset="bold24" className="m__r--32">
          {title}
        </Text>
      </div>
      {[
        AudienceAndCampaignsTabs.Contacts,
        AudienceAndCampaignsTabs.Segments,
      ].includes(page.tab) && (
        <div className="messages-wrapper">{<ContactsQuotaMessage />}</div>
      )}
      {page.tab !== AudienceAndCampaignsTabs.Embed || isEmbedOn ? (
        <div className="content">{page.component}</div>
      ) : null}
    </div>
  );
};

export default AudienceAndCampaignsSettings;
