import React from 'react'

import Button from '../../Button/Button'
import Icon from '../../Icons/Icon'
import Mdash from '../../Mdash/Mdash'
import Popover from '../../Popover/Popover'
import { trimText } from '../../../services/HelperServiceTyped'
import {
  BreadcrumbArrow,
  BreadcrumbPopoverContent,
  TextUnderline,
} from '../Common/BreadcrumbCommonComponents'
import { type BreadcrumbsProps } from '../Common/BreadcrumbTypes'
import styles from './_mobile-breadcrumb.module.scss'
import { breadcrumbBackButtonCallout } from '../Common/BreadcrumbsService'
import { c } from '../../../translations/LibraryTranslationService'

const MobileBreadcrumbs = ({
  breadcrumbs,
  callout,
  characterLimit = 11, // Mobile Breadcrumbs have a default character limit of 11. This can be overridden by passing in a `characterLimit` to Breadcrumbs.
  backButtonProps,
  textUnderlineCharacterLimit = 30, // Mobile Breadcrumbs have a default character limit of 30. This can be overridden by passing in a `textUnderlineCharacterLimit` to Breadcrumbs.
  qaTestId = 'mobile-breadcrumbs',
}: BreadcrumbsProps): React.JSX.Element => {
  const isBreadcrumbLengthLessThanThree = breadcrumbs.length < 3

  type BreadCrumbWithArrowType = {
    className: string
    name: string
    /** Optionally pass in a character limit */
    charLimit?: number
  }

  const BreadcrumbWithArrow = ({
    className,
    name,
  }: BreadCrumbWithArrowType): React.JSX.Element => (
    <span className={className}>
      {trimText(name, characterLimit)}
      <BreadcrumbArrow />
    </span>
  )

  return (
    <div className={styles.container} qa-test-id={qaTestId}>
      {breadcrumbs.length > 1 ? (
        backButtonProps?.confirmation ? (
          <Button
            as='confirmation'
            className={styles.unstyled}
            confirmation={{
              ...backButtonProps?.confirmation,
              confirmCallout: breadcrumbBackButtonCallout({
                breadcrumbs,
                callout,
              }),
            }}
          >
            <Icon
              icon='arrowLong'
              className={styles.arrowLongIcon}
              iconSize='20px'
            />
          </Button>
        ) : (
          <Button
            as='unstyled'
            className={styles.backArrowButton}
            onClick={breadcrumbBackButtonCallout({ breadcrumbs, callout })}
          >
            <Icon
              icon='arrowLong'
              className={styles.arrowLongIcon}
              iconSize='20px'
            />
          </Button>
        )
      ) : null}

      {/* Display the breadcrumbs when there are less than 3 breadcrumbs */}
      {isBreadcrumbLengthLessThanThree ? (
        <div>
          {breadcrumbs.map((b, i) => {
            if (b.name) {
              if (breadcrumbs.length - 1 !== i) {
                const bStyles =
                  breadcrumbs.length === 2
                    ? styles.twoLevelBreadcrumbPosition
                    : styles.breadcrumbPosition

                return (
                  <BreadcrumbWithArrow
                    key={b.link}
                    className={bStyles}
                    name={b.name}
                  />
                )
              } else {
                return (
                  <TextUnderline
                    text={b.name}
                    key={b.link}
                    characterLimit={textUnderlineCharacterLimit}
                  />
                )
              }
            } else {
              return <Mdash key={b.link} />
            }
          })}
        </div>
      ) : (
        //  When there are more than 3 breadcrumbs we need a popover to display all of the breadcrumbs. It will appear as +2 More...
        <Popover
          position='bottom'
          popoverContent={({ setVisible }) => (
            <BreadcrumbPopoverContent
              breadcrumbs={breadcrumbs}
              close={() => setVisible(false)}
              callout={callout}
            />
          )}
        >
          {({ setVisible }) => (
            <div onClick={() => setVisible(true)}>
              <div className={styles.breadcrumbTippyTooltipInnerContainer}>
                <BreadcrumbWithArrow
                  className={styles.breadcrumbTitleContainer}
                  name={breadcrumbs[0].name ?? ''}
                />
                {breadcrumbs?.length === 3 ? (
                  <BreadcrumbWithArrow
                    className={styles.breadcrumbTitleContainer}
                    name={breadcrumbs[1].name ?? ''}
                  />
                ) : (
                  <BreadcrumbWithArrow
                    className={styles.breadcrumbTitleContainer}
                    name={c('moreBreadcrumbs', {
                      breadcrumbsCount: breadcrumbs.length - 2,
                    })}
                  />
                )}
              </div>
              <div>
                <TextUnderline
                  text={breadcrumbs[breadcrumbs.length - 1].name ?? ''}
                  characterLimit={textUnderlineCharacterLimit}
                />
              </div>
            </div>
          )}
        </Popover>
      )}
    </div>
  )
}

export default MobileBreadcrumbs