import React, { forwardRef } from 'react';
import { Box, IconButton } from '@nova-hf/ui';
import { TextInput } from 'frisco';

import Button from '../Button/Button';

type InputWithButtonProps = {
  id: string;
  name: string;
  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
  onChange: (e?: React.ChangeEvent<HTMLInputElement>) => void;
  buttonType?: 'Text' | 'Icon';
  isDisabled: boolean;
  disableInput?: boolean;
  placeholder: string;
  value: string;
  buttonText?: string;
  loading?: boolean;
};

const InputWithButton = forwardRef(
  (
    {
      id,
      name,
      onClick,
      isDisabled,
      placeholder,
      buttonType = 'Text',
      value,
      onChange,
      loading,
      buttonText = 'Skoða',
      disableInput = false,
    }: InputWithButtonProps,
    ref?: React.Ref<HTMLInputElement>,
  ) => {
    return (
      <Box width="100%" display="flex" position="relative">
        <TextInput
          id={id}
          ref={ref}
          name={name}
          onChange={onChange}
          disabled={loading || disableInput}
          value={value}
          backgroundColor="grey100"
          placeholder={placeholder}
          textColor="grey700"
          onKeyDown={(e) => {
            if (e.key === 'Enter' && !isDisabled) onClick?.();
          }}
        />
        <Box
          height="100%"
          display="flex"
          alignItems="center"
          position="absolute"
          right={1}
          marginRight={0}
        >
          {buttonType === 'Text' ? (
            <Button
              textVariant="pSmallRegular"
              backgroundColor={isDisabled ? 'grey300' : 'pink'}
              textColor={isDisabled ? 'grey700' : 'white'}
              disabled={isDisabled}
              onClick={onClick}
              text={buttonText}
              loading={loading}
              style={{
                paddingTop: '12px',
                paddingBottom: '12px',
                borderRadius: '8px',
              }}
            />
          ) : (
            <IconButton
              color="grey200"
              icon="close"
              hiddenButtonText="Delete national id"
              onClick={onClick}
              hasBackgroundFilled
            />
          )}
        </Box>
      </Box>
    );
  },
);

export default InputWithButton;