import List from 'antd/lib/list'
import React, { useCallback } from 'react'
import { Text } from 'components/Typography'
import {
  DataCaptureActivationItemNew,
  TalentModuleMixItem,
  TalentProfileModule
} from 'models/talent/talent-profile-module.model'
import copyToClipboard from 'copy-to-clipboard'
import { useTypedSelector } from 'redux/rootReducer'
import { selectUserData } from 'redux/User/selector'
import { useAutoSave } from 'hooks/useAutoSave'
import notification from 'utils/notification'
import { createKomiDomain } from 'services/DomainService'
import { useWindowSize } from '../../../hooks'
import When from '@komi-app/when'

import {
  ModuleType,
  ShopifyStoreTypes,
  RyeShopifyStoreTypes
} from '@komi-app/shared-types'

interface ModuleEditorActionProps<T> {
  module: TalentProfileModule<T>
  onDelete: (moduleDel: TalentProfileModule<T>) => void
  onEdit: (moduleEdit: TalentProfileModule<T>) => void
  onSelectModule: (module: TalentProfileModule<T>) => void
  onEditBandsintownLink?: () => void
  onEditSeatedLink?: () => void
  onEditShopMyShelf?: () => void
  onEditShopList?: () => void
  onEditYoutubeCollection?: () => void
  onManageShopifyStore?: () => void
  onManageRyeShopifyStore?: () => void
  toggleVisible: (value: boolean) => void
  onEditDataCapture?: (dataCapture: DataCaptureActivationItemNew) => void
}

const ModuleEditorAction: React.FC<
  ModuleEditorActionProps<TalentModuleMixItem>
> = ({
  module,
  onEdit,
  onDelete,
  toggleVisible,
  onEditBandsintownLink,
  onEditSeatedLink,
  onEditYoutubeCollection,
  onEditShopMyShelf,
  onEditShopList,
  onManageShopifyStore,
  onManageRyeShopifyStore,
  onSelectModule,
  onEditDataCapture
}) => {
  const user = useTypedSelector(selectUserData)
  const { localizationSelected } = useAutoSave()
  const onClose = () => {
    toggleVisible && toggleVisible(false)
  }

  const onEditModule = (
    moduleEdit: TalentProfileModule<TalentModuleMixItem>
  ) => {
    onEdit && onEdit(moduleEdit)
    onClose()
  }

  const onDeleteModule = (
    moduleDel: TalentProfileModule<TalentModuleMixItem>
  ) => {
    onDelete && onDelete(moduleDel)
    onClose()
  }
  const handleEditShopMyShelf = () => {
    onEditShopMyShelf?.()
    onClose()
  }
  const handleEditShopList = () => {
    onEditShopList?.()
    onClose()
  }
  const handleEditYoutubeCollection = () => {
    onEditYoutubeCollection?.()
    onClose()
  }
  const handleCopyLinkModule = useCallback(() => {
    onClose()

    const komiLink = createKomiDomain(
      user?.username || user?.talentProfile?.user?.username || ''
    )
    copyToClipboard(`${komiLink}/#${module?.id}`)
    notification.success({
      message: !localizationSelected?.id
        ? 'The module link has been copied to your clipboard.'
        : 'The module link has been copied to your clipboard. Please note that if the user is not in a region accessible to this page, they will be routed to the top of your profile.'
    })
  }, [module, user, localizationSelected])

  const handleEditDatacaptureModule = () => {
    onEditDataCapture?.()
    onClose()
  }
  const isDCM =
    module.type === ModuleType.DATA_CAPTURE_COUPON_CODE ||
    module.type === ModuleType.DATA_CAPTURE_SECRET_LINK ||
    module.type === ModuleType.DATA_CAPTURE_SIGNUP

  const { width } = useWindowSize()

  return (
    <List data-testid="module-editor-action" className="module-editor__acitons">
      <List.Item onClick={handleCopyLinkModule}>
        <Text data-testid="module-editor-action--copy" preset="semibold14">
          Copy Module Link
        </Text>
      </List.Item>
      <List.Item onClick={() => onEditModule(module)}>
        <Text data-testid="module-editor-action--edit" preset="semibold14">
          Edit Name
        </Text>
      </List.Item>

      {module.type === ModuleType.YOUTUBE_COLLECTION ? (
        <List.Item onClick={handleEditYoutubeCollection}>
          <Text preset="semibold14">Edit YouTube Link</Text>
        </List.Item>
      ) : null}

      {isDCM && (
        <List.Item onClick={handleEditDatacaptureModule}>
          <Text preset="semibold14">Edit</Text>
        </List.Item>
      )}

      {module.type === ModuleType.BANDSINTOWN ? (
        <List.Item onClick={onEditBandsintownLink}>
          <Text preset="semibold14">Edit Bandsintown Link</Text>
        </List.Item>
      ) : null}
      {module.type === ModuleType.SEATED ? (
        <List.Item onClick={onEditSeatedLink}>
          <Text preset="semibold14">Edit Seated Artist ID</Text>
        </List.Item>
      ) : null}
      {module.type === ModuleType.SHOP_MY_SHELF ? (
        <List.Item onClick={handleEditShopMyShelf}>
          <Text preset="semibold14">Edit Shop My Link</Text>
        </List.Item>
      ) : null}
      {module.type === ModuleType.SHOP_LIST ? (
        <List.Item onClick={handleEditShopList}>
          <Text preset="semibold14">Edit Shoplist Link</Text>
        </List.Item>
      ) : null}

      <When
        value={
          width &&
          width > 768 &&
          module.type !== ModuleType.GROUP &&
          !isDCM &&
          !module.groupId
        }
        then={
          <List.Item onClick={() => onSelectModule(module)}>
            <Text
              data-testid="module-editor-action--create-module-group"
              preset="semibold14"
            >
              Create a Module Group
            </Text>
          </List.Item>
        }
      />
      {ShopifyStoreTypes.includes(module.type as ModuleType) && (
        <List.Item onClick={onManageShopifyStore}>
          <Text preset="semibold14">Manage Shopify Stores</Text>
        </List.Item>
      )}
      {RyeShopifyStoreTypes.includes(module.type as ModuleType) && (
        <List.Item onClick={onManageRyeShopifyStore}>
          <Text preset="semibold14">Manage Shopify Stores</Text>
        </List.Item>
      )}
      <List.Item onClick={() => onDeleteModule(module)}>
        <Text
          data-testid="module-editor-action--delete"
          preset="semibold14"
          className="text--red"
        >
          Delete
        </Text>
      </List.Item>
    </List>
  )
}

export default ModuleEditorAction
