import { ShopifyStore } from '../../../redux/Shopify/types'
import { RyeShopifyStore } from '../../../redux/RyeShopify/types'
import { Icon } from '@komi-app/components'
import { Icon as TalentIcon } from '../../../components/Icon'
import React from 'react'
import { MenuItem } from './types'
import { SocialIcon, SocialLinkType } from '@komi-app/creator-ui'
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,
  isThroneOn: 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
  })

  if (isThroneOn) {
    items.push({
      title: 'Add Throne Wishlist',
      icon: <TalentIcon name="throne" width={24} height={24} />,
      type: ModuleType.THRONE_LINK
    })
  }

  return items
}
const getDataCaptureMenu = (isAudiencesAndCampaignsOn: boolean): MenuItem => {
  return isAudiencesAndCampaignsOn
    ? {
        key: 'dataCapture',
        title: 'Data Capture Form',
        testId: 'sub-menu-dca',
        description: "Collect your audience's email and phone number",
        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',
        description: "Collect your audience's email and phone number",
        icon: <TalentIcon width={24} height={24} name="data-form" />,
        type: ModuleType.FORM_DATA
      }
}
export const getMenuItemsUpdated = (
  stores: ShopifyStore[],
  ryeStores: RyeShopifyStore[],
  {
    isNewPodcast,
    isNewYoutube,
    isShopifyOn,
    isRyeShopifyOn,
    isAudiencesAndCampaignsOn,
    isThroneOn,
    isTikTokOn
  }: { [_: string]: boolean }
): MenuItem[] => [
  {
    title: 'External Link',
    description: 'Direct visitors to another site or highlight special offers',
    testId: 'menu-item-link',
    icon: <TalentIcon width={24} height={24} name="link" />,
    type: ModuleType.LINK
  },
  isTikTokOn
    ? {
        title: 'Video',
        testId: 'menu-item-video',
        description: 'Showcase videos from your channels',
        icon: <TalentIcon name="video-player" width={24} height={24} />,
        key: 'Video',
        subMenu: [
          {
            title: 'YouTube',
            testId: 'menu-item-youtube-video',
            icon: <SocialIcon social={SocialLinkType.YOUTUBE} mode="color" />,
            type: isNewYoutube ? ModuleType.YOUTUBE : ModuleType.YOUTUBE_VIDEO
          },
          {
            title: 'TikTok',
            testId: 'menu-item-youtube-video',
            icon: <SocialIcon social={SocialLinkType.TIKTOK} mode="color" />,
            type: ModuleType.TIKTOK_VIDEO
          }
        ]
      }
    : {
        title: 'YouTube Video',
        testId: 'menu-item-youtube-video',
        description: 'Showcase videos directly from YouTube',
        icon: <TalentIcon name="video-player" width={24} height={24} />,
        type: isNewYoutube ? ModuleType.YOUTUBE : ModuleType.YOUTUBE_VIDEO
      },
  {
    title: 'Music',
    testId: 'menu-item-music',
    description: 'Share music instantly with smart links and pre-release links',
    icon: <TalentIcon width={24} height={24} name="sound" />,
    type: ModuleType.MUSIC
  },
  {
    title: 'Podcast',
    testId: 'menu-item-podcast',
    description: 'Sync your latest episodes or add episodes individually',
    icon: <TalentIcon width={24} height={24} name="podcast" />,
    type: isNewPodcast ? ModuleType.PODCAST_SELECT : ModuleType.PODCAST
  },
  {
    title: 'Product',
    description: isThroneOn
      ? 'Feature your items, wishlists or promote affiliate products'
      : 'Feature your items or promote affiliate products',
    testId: 'sub-menu-store',
    icon: <TalentIcon name="shop" width={24} height={24} />,
    key: 'Store',
    subMenu: storeSubMenu(
      stores,
      ryeStores,
      isShopifyOn,
      isRyeShopifyOn,
      isThroneOn
    )
  },
  {
    title: 'Events',
    description: 'Add your events or sync with Bandsintown and Seated',
    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)
]
