import React from 'react'

import Icon from '../Icons/Icon'
import PatternLogo from '../PatternLogo/PatternLogo'
import Tooltip from '../Tooltip/Tooltip'
import { c } from '../../translations/LibraryTranslationService'
import { type IconSizes, type IconStringList } from '../Icons/Icon.models'
import styles from './_primary-cell.module.scss'

type ProductProps = {
  sold_by_iserve: boolean
  sold_by_pattern?: boolean
  sold_by_threepn: boolean
}

type TooltipContentProps = {
  [key: string]: {
    icon: IconStringList
    content: string
  }
}

const tooltipContent: TooltipContentProps = {
  pattern: {
    icon: 'pattern',
    content: c('sellingInfoTooltipPattern'),
  },
  threepn: {
    icon: 'threepn',
    content: c('sellingInfoTooltipThreepn'),
  },
  patternPlus: {
    icon: 'patternPlus',
    content: c('sellingInfoTooltipPatternPlus'),
  },
}

const currentTooltip = (product: ProductProps) => {
  return (product.sold_by_iserve || product.sold_by_pattern) &&
    product.sold_by_threepn
    ? 'patternPlus'
    : product.sold_by_iserve || product.sold_by_pattern
      ? 'pattern'
      : 'threepn'
}

const getSellerTooltipInfo = (
  product: ProductProps,
): { icon: IconStringList; content: string } => {
  return {
    icon: tooltipContent[currentTooltip(product)]?.icon,
    content: tooltipContent[currentTooltip(product)]?.content,
  }
}

type TooltipProps = React.ComponentProps<typeof Tooltip>

type SellingInfoTooltipProps = {
  /** Product is needed to determine the content within the tooltip */
  product: ProductProps
  /** Optionally change the position of the tooltip */
  position?: TooltipProps['position']
  /** Optionally change the icon size for the tooltip */
  iconSize?: IconSizes
}

const SellingInfoTooltip = ({
  product,
  position = 'left',
  iconSize = '20px',
}: SellingInfoTooltipProps): React.JSX.Element => {
  const icon = getSellerTooltipInfo(product)?.icon
  return (
    <span>
      {(product.sold_by_iserve ||
        product.sold_by_pattern ||
        product.sold_by_threepn) && (
        <Tooltip
          position={position}
          tooltipContent={
            <div className={styles.sellingInfoTooltip}>
              <div>
                {icon === 'patternPlus' || icon === 'pattern' ? (
                  <PatternLogo logoType={icon} />
                ) : (
                  <Icon icon={icon} color='dark-blue' />
                )}
              </div>
              <div className={styles.infoTooltipContainer}>
                {getSellerTooltipInfo(product)?.content}
              </div>
            </div>
          }
        >
          {icon === 'patternPlus' || icon === 'pattern' ? (
            <PatternLogo logoType={icon} />
          ) : (
            <Icon icon={icon} color='dark-blue' iconSize={iconSize} />
          )}
        </Tooltip>
      )}
    </span>
  )
}

export default SellingInfoTooltip