import React, { forwardRef } from 'react'

import { c } from '../../translations/LibraryTranslationService'
import styles from './_filter.module.scss'
import Button from '../Button/Button'
import TrimText from '../TrimText/TrimText'
import { getPlaceholder } from './exposedFilter-helper'
import { type TooltipProps } from '../Tooltip/Tooltip'

//lableProps is the props for the label of the filter.
type LabelProps = {
  labelName: string
  placeholder?: string
  useTrimForLabel?: boolean
}

//Tagview is the view of the tags in the filter.
type TagProps = {
  tags: string[]
  useTrimForTags?: boolean
  truncateTagIndex?: number
  truncatedTagWidth?: number
  withMaxWidthOptionContainer?: boolean
  hasMore?: boolean
  totalCount?: number
}

type ExposedFilterShellProps = {
  label: LabelProps
  disabled?: boolean
  disabledTooltip?: Omit<TooltipProps, 'children'>
  isActive: boolean
  tagView: TagProps
  onMainClick: () => void
  onClear?: () => void
}

const ExposedFilterShell = forwardRef<HTMLDivElement, ExposedFilterShellProps>(
  (
    {
      label,
      disabled = false,
      disabledTooltip,
      isActive,
      tagView = {
        tags: [],
        truncateTagIndex: -1,
        truncatedTagWidth: 0,
        withMaxWidthOptionContainer: false,
        hasMore: false,
        totalCount: 1,
        useTrimForTags: false,
      },
      onMainClick,
      onClear,
    },
    ref,
  ) => {
    return (
      <div
        ref={ref}
        className={`${styles.filterContainer} ${isActive ? styles.active : ''} ${disabled ? styles.disabled : ''}`}
      >
        <Button
          as='unstyled'
          onClick={onMainClick}
          className={disabled ? styles.disabled : ''}
          {...(disabled ? { disabled, tooltip: disabledTooltip } : {})}
        >
          <div
            className={`${styles.flexContainer} ${isActive ? styles.withClearButton : ''}`}
          >
            {label.useTrimForLabel ? (
              <TrimText
                position='top'
                customClass={`${isActive ? styles.fontStyled : styles.fontNotSelected} ${styles.labelContainer}`}
                text={label.labelName}
              />
            ) : (
              <span
                className={`${isActive ? styles.fontStyled : styles.fontNotSelected} ${styles.labelContainer}`}
              >
                {label.labelName}
              </span>
            )}
            {isActive ? (
              <div
                className={`${styles.optionContainer} ${tagView.withMaxWidthOptionContainer ? styles.optionContainerWithMaxWidth : ''}`}
              >
                {!tagView?.withMaxWidthOptionContainer ? (
                  tagView.tags.map((tag, index) =>
                    index === tagView.truncateTagIndex ? (
                      <div
                        key={index}
                        className={styles.optionName}
                        style={{ maxWidth: `${tagView?.truncatedTagWidth}px` }}
                      >
                        <TrimText text={tag} />
                      </div>
                    ) : (
                      <span key={index} className={styles.optionName}>
                        {tag}
                      </span>
                    ),
                  )
                ) : (
                  <TrimText
                    customClass={styles.optionName}
                    text={tagView.tags[0]}
                  />
                )}
                {tagView?.hasMore && typeof tagView?.totalCount === 'number' ? (
                  <span className={styles.moreIndicator}>
                    +{tagView?.totalCount - tagView?.tags.length}
                  </span>
                ) : null}
              </div>
            ) : (
              <>{getPlaceholder(label.placeholder)}</>
            )}
          </div>
        </Button>
        {isActive && onClear ? (
          <Button
            as='unstyled'
            className={styles.clearButton}
            onClick={onClear}
          >
            {c('clear')}
          </Button>
        ) : null}
      </div>
    )
  },
)

export default ExposedFilterShell