import React, { forwardRef } from 'react';
import { Box, Grid, GridItem, Input, MainButton, Pill } from '@nova-hf/ui';
import { InputProps } from '@nova-hf/ui/umd/ts/src/form-elements/input/Input';
import { useTranslation } from 'utils/i18n';

type InputWithButtonsProps = {
  isValid?: boolean;
  isVerified?: boolean;
  originalValue?: string;
  loading?: boolean;
  onCancel?: () => void;
  onSubmitClick: (value?: string) => void;
} & InputProps;

export const InputWithButtons = forwardRef(
  (
    {
      isValid,
      isVerified,
      id,
      label,
      placeholder,
      name,
      value,
      originalValue,
      loading,
      onChange,
      onSubmitClick,
      ...rest
    }: InputWithButtonsProps,
    ref?: React.Ref<HTMLInputElement>,
  ) => {
    const { t } = useTranslation('containers');
    const shouldResendValidation = value === originalValue && !isVerified;
    const shouldShowButton = value !== originalValue || !isVerified;
    return (
      <Grid gridTemplate={{ sm: 4, md: 12 }}>
        <GridItem gridColumn={{ sm: 'span4', md: 'span7' }}>
          <Box position="relative">
            <Input
              id={id}
              label={label}
              placeholder={placeholder}
              name={name}
              value={value}
              onChange={onChange}
              style={{ paddingRight: '110px' }}
              ref={ref}
              {...rest}
            />
            {!!value && (
              <Box
                position="absolute"
                style={{ top: '50%', right: 0, transform: 'translate(0, -50%)' }}
              >
                <Pill
                  color={isVerified ? 'success' : 'attention'}
                  text={
                    isVerified ? t('inputWithButtons.verified') : t('inputWithButtons.unverified')
                  }
                />
              </Box>
            )}
          </Box>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4', md: 'span5', lg: 'span4' }}>
          {shouldShowButton && (
            <MainButton
              colorScheme={shouldResendValidation ? 'white' : 'pink'}
              text={
                shouldResendValidation
                  ? t('inputWithButtons.buttonResendVerification')
                  : t('inputWithButtons.buttonVerify')
              }
              dottedShadow="none"
              onClick={() => onSubmitClick()}
              isDisabled={!isValid}
              isLoading={loading}
            />
          )}
        </GridItem>
      </Grid>
    );
  },
);