import { SearchOutlined } from '@ant-design/icons';
import { Button, Flex, Input } from 'antd';
import type { InputProps } from 'antd';
import { InputUI } from '../primitives/input';
import type { PopupUIProps } from './types';

export function PopupUI({
  type = 'default',
  value,
  defaultValue,
  resultValue,
  onChange,
  onButtonClick,
  buttonText = '검색',
  buttonDisabled,
  inputPlaceholder,
  resultPlaceholder = '선택 결과',
  disabled,
  size,
  status,
  variant,
  allowClear,
}: PopupUIProps) {
  const sharedInputProps: Pick<
    InputProps,
    'disabled' | 'size' | 'status' | 'variant' | 'allowClear'
  > = {
    disabled,
    size,
    status,
    variant,
    allowClear,
  };

  return (
    <Flex gap={0} align="stretch" className={`popup-input-ui popup-input-ui--${type}`}>
      <InputUI
        {...sharedInputProps}
        value={value}
        defaultValue={defaultValue}
        onChange={onChange}
        placeholder={inputPlaceholder}
        className="popup-input-ui__input"
      />

      <Button
        type="primary"
        size={size}
        disabled={disabled || buttonDisabled}
        onClick={onButtonClick}
        className="popup-input-ui__button"
        icon={type === 'search' ? <SearchOutlined /> : undefined}
      >
        {type === 'search' ? null : buttonText}
      </Button>

      <Input
        {...sharedInputProps}
        readOnly
        value={resultValue}
        placeholder={resultPlaceholder}
        className="popup-input-ui__result"
      />
    </Flex>
  );
}
