import { ChevronDown } from '@transferwise/icons';
import { clsx } from 'clsx';
import React from 'react';

import { InputGroup } from '../../InputGroup';
import { SelectInputClearButton } from '../ClearButton';
import { SelectInputTriggerButton } from '../TriggerButton';
import { SelectInputProps } from '../SelectInput.types';
import { SelectInputButtonInput } from '../ButtonInput';

export interface SelectInputDefaultRenderTriggerProps {
  content: React.ReactNode;
  placeholderShown: boolean;
  clear: (() => void) | undefined;
  disabled: boolean;
  size: 'sm' | 'md' | 'lg';
  className: string | undefined;
}

/**
 * Default render function for the SelectInput trigger.
 * Displays the selected value or placeholder with clear button and dropdown indicator.
 */
export function SelectInputDefaultRenderTrigger({
  content,
  placeholderShown,
  clear,
  disabled,
  size,
  className,
}: SelectInputDefaultRenderTriggerProps) {
  return (
    <InputGroup
      addonEnd={{
        content: (
          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
            {clear != null && !placeholderShown ? (
              <>
                <SelectInputClearButton
                  onClick={(event) => {
                    event.preventDefault();
                    clear();
                  }}
                />
                <span className="np-select-input-addon-separator" />
              </>
            ) : null}
            <span className="np-select-input-addon">
              <ChevronDown size={16} />
            </span>
          </span>
        ),
        initialContentWidth: 24 + 4,
        padding: 'sm',
      }}
      disabled={disabled}
      className={className}
    >
      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>
        <span
          className={clsx(
            'np-select-input-content',
            placeholderShown && 'np-select-input-placeholder',
          )}
        >
          {content}
        </span>
      </SelectInputTriggerButton>
    </InputGroup>
  );
}

export const DefaultRenderTrigger =
  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];