import { useCallback } from 'react';

import type { ClickableOnClick } from '~/src/components/Clickable';
import type { Icon } from '~/src/components/Icon/toIcon';
import type { TextInputProps } from '~/src/components/TextInput';
import type { FC } from 'react';

import Clickable from '~/src/components/Clickable';
import HoverBackground from '~/src/components/HoverBackground';
import TextInput from '~/src/components/TextInput';

interface TextInputWithIconButtonProps extends TextInputProps {
  onIconClick?: ClickableOnClick;
  Icon: Icon;
  iconButtonDisabled?: boolean;
}

const TextInputWithIconButton: FC<TextInputWithIconButtonProps> = ({
  Icon,
  onIconClick,
  iconButtonDisabled,
  ...textInputProps
}) => (
  <TextInput
    {...textInputProps}
    renderBefore={useCallback(
      () => (
        <div
          style={{
            height: '100%',
            borderRight: 'solid 1px #444',
            cursor: iconButtonDisabled ? 'not-allowed' : undefined,
          }}
        >
          <HoverBackground>
            <Clickable
              fullHeight
              width="4.9rem"
              centerContent
              onClick={onIconClick}
              testId="pickIcon"
              isDisabled={iconButtonDisabled}
              pointerEvents={!onIconClick ? 'none' : undefined}
            >
              <Icon opacity={0.9} size="1.5em" coloring="light" />
            </Clickable>
          </HoverBackground>
        </div>
      ),
      [Icon]
    )}
  />
);

export default TextInputWithIconButton;