import classNames from 'classnames';
import './InputWithDropdown.scss';
import { InputWithDropdownProps } from './types';
import Select from '../Select/Select';
import Typography from '../Typography';

const InputWithDropdown = ({
  name = '',
  label,
  value,
  type,
  disabled = false,
  required = false,
  placeholder,
  error,
  helperText,
  optionsList,
  selectedOption,
  onDropdownChangeHandler = () => {},
  onInputChangeHandler,
}: InputWithDropdownProps) => {
  return (
    <div
      className={classNames('ff-input-with-dropdown-container', {
        'ff-input-with-dropdown-container--filled': !!value,
      })}
    >
      <fieldset
        className={classNames('ff-input-with-dropdown', {
          'ff-input-with-dropdown--filled': !!value,
          'ff-input-with-dropdown--no-hover': !!value,
          'ff-input-with-dropdown--disabled': !!disabled,
          'ff-input-with-dropdown--error': !!error,
        })}
      >
        <div className={classNames('ff-floating-label-input-container')}>
          <Typography
            as="label"
            htmlFor={name}
            className={classNames('ff-floating-label', {
              'ff-floating-label--filled': !!value,
              'ff-floating-label--no-hover': !!value,
              'ff-floating-label--error': !!error,
            })}
          >
            {required && <span className="ff-required-asterisk">*</span>}{' '}
            {label}
          </Typography>
          <input
            name={name}
            type={type}
            id={name}
            value={value}
            onChange={onInputChangeHandler}
            placeholder={placeholder}
            required={required}
            disabled={disabled}
            className={classNames('ff-floating-input', {
              'ff-floating-input--filled': !!value,
              'ff-floating-input--disabled': !!disabled,
              'ff-floating-input--error': !!error,
            })}
          />
        </div>
        <Select
          optionsList={optionsList}
          selectedOption={selectedOption}
          showLabel={false}
          showBorder={false}
          onChange={onDropdownChangeHandler}
          disabled={disabled}
          className={classNames('ff-floating-dropdown', {
            'ff-floating-dropdown--disabled': !!disabled,
            'ff-floating-dropdown--error': !!error,
          })}
        />
      </fieldset>
      {error && helperText && (
        <span className="ff-helper-text">{helperText}</span>
      )}
    </div>
  );
};

export default InputWithDropdown;