import React from 'react'

import Button from '../../Button/Button'
import Mdash from '../../Mdash/Mdash'
import Popover from '../../Popover/Popover'
import TrimText from '../../TrimText/TrimText'
import {
  BreadcrumbArrow,
  BreadcrumbPopoverContent,
  TextUnderline,
} from '../Common/BreadcrumbCommonComponents'
import {
  type BreadcrumbsProps,
  type BreadcrumbType,
} from '../Common/BreadcrumbTypes'
import styles from './_desktop-breadcrumbs.module.scss'
import { breadcrumbBackButtonCallout } from '../Common/BreadcrumbsService'
import { c } from '../../../translations/LibraryTranslationService'

const DesktopBreadcrumbs = ({
  breadcrumbs,
  characterLimit = 15, // Desktop Breadcrumbs have a default character limit of 15. This can be overridden by passing in a `characterLimit` to Breadcrumbs.
  callout,
  backButtonProps,
  textUnderlineCharacterLimit, // No default set here. This can be set by passing in a `textUnderlineCharacterLimit` to Breadcrumbs.
  qaTestId = 'desktop-breadcrumbs',
}: BreadcrumbsProps): React.JSX.Element => {
  const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1]
  const backButtonText = backButtonProps?.text || 'Back'

  const Breadcrumb = ({ breadcrumb }: { breadcrumb: BreadcrumbType }) => (
    <Button
      as='unstyled'
      className={styles.breadcrumb}
      onClick={() => callout?.(breadcrumb)}
    >
      <TrimText
        text={breadcrumb.name ?? ''}
        limit={characterLimit}
        customClass={styles.breadcrumbFontSize}
      />
    </Button>
  )

  const Standard = () => (
    <>
      {breadcrumbs.map((b, i) => {
        if (b.name) {
          if (breadcrumbs.length - 1 !== i) {
            return (
              <React.Fragment key={`${b.name}_${b.link ? b.link : ''}`}>
                <Breadcrumb breadcrumb={b} />
                <BreadcrumbArrow />
              </React.Fragment>
            )
          } else {
            return (
              <TextUnderline
                key={b.link}
                text={b.name}
                characterLimit={textUnderlineCharacterLimit}
                isDesktop
              />
            )
          }
        } else {
          return <Mdash key={b.link} />
        }
      })}
    </>
  )

  const Extended = () => (
    <>
      <Breadcrumb breadcrumb={breadcrumbs[0]} />
      <BreadcrumbArrow />

      <Popover
        position='bottom'
        popoverContent={({ setVisible }) => (
          <BreadcrumbPopoverContent
            breadcrumbs={breadcrumbs}
            close={() => setVisible(false)}
            callout={callout}
            isDesktop
          />
        )}
      >
        {({ setVisible }) => (
          <div>
            <Button as='unstyled' onClick={() => setVisible(true)}>
              <span>
                {c('moreBreadcrumbs', {
                  breadcrumbsCount: breadcrumbs.length - 2,
                })}
              </span>
            </Button>
          </div>
        )}
      </Popover>

      <BreadcrumbArrow />
      {lastBreadcrumb.name ? (
        <TextUnderline
          text={lastBreadcrumb.name}
          characterLimit={textUnderlineCharacterLimit}
          isDesktop
        />
      ) : (
        <Mdash />
      )}
    </>
  )

  return (
    <div className={styles.breadcrumbs} qa-test-id={qaTestId}>
      {breadcrumbs.length > 3 ? Extended() : Standard()}
      {breadcrumbs.length > 1 ? (
        backButtonProps?.confirmation ? (
          <Button
            className={styles.backButton}
            as='confirmation'
            confirmation={{
              ...backButtonProps?.confirmation,
              confirmCallout: breadcrumbBackButtonCallout({
                breadcrumbs,
                callout,
              }),
            }}
            popoverProps={{
              position: 'bottom',
            }}
          >
            {backButtonText}
          </Button>
        ) : (
          <Button
            className={styles.backButton}
            onClick={breadcrumbBackButtonCallout({ breadcrumbs, callout })}
          >
            {backButtonText}
          </Button>
        )
      ) : null}
    </div>
  )
}

export default DesktopBreadcrumbs