import { ShopifyStore } from "../../../redux/Shopify/types";
import { RyeShopifyStore } from "../../../redux/RyeShopify/types";
import { MenuItem } from "./types";
import { Icon } from "@komi-app/components";
import { Icon as TalentIcon } from "../../../components/Icon";
import React from "react";
import { ModuleType } from "@komi-app/shared-types"

const getShopifySubMenuCaption = (
  stores: (ShopifyStore | RyeShopifyStore)[]
): string =>
  stores && stores.length
    ? "Add Products from Shopify"
    : "Connect a Shopify Store";

const customProductsSubMenu = {
  title: "Add Custom Products",
  icon: <TalentIcon width={24} height={24} name="shop" />,
  type: ModuleType.PRODUCT,
};

const storeSubMenu = (
  stores: ShopifyStore[],
  ryeStores: RyeShopifyStore[],
  isShopifyOn: boolean,
  isRyeShopifyOn: boolean
): {
  title: string;
  icon: JSX.Element;
  type?: ModuleType;
}[] => {
  const items = [customProductsSubMenu];
  if (isShopifyOn) {
    if (isRyeShopifyOn) {
      items.push({
        title: getShopifySubMenuCaption(ryeStores),
        icon: <TalentIcon name="shopify" />,
        type: ModuleType.RYE_SHOPIFY,
      });
    } else {
      items.push({
        title: getShopifySubMenuCaption(stores),
        icon: <TalentIcon name="shopify" />,
        type: ModuleType.SHOPIFY,
      });
    }
  }

  items.push({
    title: "Add Products from Shop My",
    icon: <TalentIcon name="shop-my-shelf" width={24} height={24} />,
    type: ModuleType.SHOP_MY_SHELF,
  });

  return items;
};

const getDataCaptureMenu = (isAudiencesAndCampaignsOn: boolean): MenuItem => {
  return isAudiencesAndCampaignsOn
    ? {
        key: "dataCapture",
        title: "Data Capture",
        testId: "sub-menu-dca",
        icon: <Icon name="dataForm" />,
        subMenu: [
          {
            title: "Email/SMS Signup",
            icon: (
              <Icon
                width={24}
                height={24}
                name="email"
                style={{ color: "#0F69E6" }}
              />
            ),
            type: ModuleType.DATA_CAPTURE_SIGNUP,
            testId: "email-sms-menu",
          },
          {
            title: "Secret Link",
            icon: <Icon width={24} height={24} name="hyperlink" />,
            type: ModuleType.DATA_CAPTURE_SECRET_LINK,
          },
          {
            title: "Secret Code",
            icon: <Icon name="percentage" />,
            type: ModuleType.DATA_CAPTURE_COUPON_CODE,
          },
        ],
      }
    : {
        key: "data-capture-from",
        testId: "sub-menu-dcf",
        title: "Data Capture Form",
        icon: <TalentIcon width={24} height={24} name="data-form" />,
        type: ModuleType.FORM_DATA,
      };
};

export const getMenuItems = (
  stores: ShopifyStore[],
  ryeStores: RyeShopifyStore[],
  {
    isNewPodcast,
    isNewYoutube,
    isShopifyOn,
    isRyeShopifyOn,
    isAudiencesAndCampaignsOn,
  }: { [key: string]: boolean }
): MenuItem[] => [
  {
    title: "Link",
    testId: "menu-item-link",
    icon: <TalentIcon width={24} height={24} name="link" />,
    type: ModuleType.LINK,
  },
  {
    title: "Video",
    testId: "sub-menu-video",
    icon: <TalentIcon width={24} height={24} name="video-player" />,
    key: "Video",
    subMenu: [
      {
        title: "On-demand Video",
        icon: <TalentIcon name="video-player" width={24} height={24} />,
        type: ModuleType.ON_DEMAND_VIDEO,
      },
      {
        title: "YouTube Video",
        icon: <TalentIcon width={24} height={24} name="youtube" />,
        type: isNewYoutube
          ? ModuleType.YOUTUBE
          : ModuleType.YOUTUBE_VIDEO,
      },
    ],
  },
  {
    title: "Audio",
    testId: "sub-menu-audio",
    icon: <TalentIcon name="sound" width={24} height={24} />,
    key: "Audio",
    subMenu: [
      {
        title: "Music",
        icon: <TalentIcon width={24} height={24} name="music" />,
        type: ModuleType.MUSIC,
      },
      {
        title: "Podcast",
        icon: <TalentIcon width={24} height={24} name="podcast" />,
        type: isNewPodcast
          ? ModuleType.PODCAST_SELECT
          : ModuleType.PODCAST,
      },
    ],
  },
  {
    title: "Store",
    testId: "sub-menu-store",
    icon: <TalentIcon name="shop" width={24} height={24} />,
    key: "Store",
    subMenu: storeSubMenu(stores, ryeStores, isShopifyOn, isRyeShopifyOn),
  },
  {
    title: "Events",
    testId: "sub-menu-events",
    icon: <TalentIcon name="ticket" width={24} height={24} />,
    key: "menuEvents",
    subMenu: [
      {
        title: "Add Custom Events",
        testId: "",
        icon: <TalentIcon name="ticket" width={24} height={24} />,
        type: ModuleType.EVENTS,
      },
      {
        title: "Add from Bandsintown",
        icon: <TalentIcon width={24} height={24} name="bandintown" />,
        type: ModuleType.BANDSINTOWN,
      },
      {
        title: "Add from Seated",
        icon: <TalentIcon width={24} height={24} name="seated" />,
        type: ModuleType.SEATED,
      },
    ],
  },
  getDataCaptureMenu(isAudiencesAndCampaignsOn),
];
