import './FormItemPriceNumber.scss'
import React, { useMemo } from 'react'
import { Form, InputProps } from 'antd'
import { Text } from '../Typography'
import { FieldProps, getIn } from 'formik'
import { ExchangeRate } from 'redux/User/types'
import { ExchangeRateDefault } from 'constants/exchange-rate'
import { formatterCurrencyEXRate } from 'utils/currency'
import { getRoundingPriceLocal } from 'utils/number'
import CurrencyInput from 'react-currency-input-field'
import classNames from 'classnames'

interface Props extends FieldProps<InputProps> {
  name: string
  label: string
  description: string
  className?: string
  labelClassName?: string
  descriptionClassName?: string
  placeholder?: string
  addtext: string
  value: number
  defaultValue: number
  submitCount?: number
  decimalsLimit?: number
  prefix?: string
  prefixInline?: boolean
  exchangeRate?: ExchangeRate
  showPriceDisplay?: boolean
}

export const AntInputPriceNumber: React.FC<Props> = ({
  name,
  description,
  field,
  form,
  label,
  className,
  labelClassName,
  descriptionClassName,
  submitCount,
  placeholder,
  value,
  defaultValue,
  exchangeRate = ExchangeRateDefault,
  decimalsLimit = 2,
  showPriceDisplay = false,
  prefixInline = true,
  prefix = '$'
}) => {
  const touched = getIn(form.touched, field.name)
  const hasError = getIn(form.errors, field.name)
  const submitted = submitCount && submitCount > 0
  const submittedError = hasError && submitted
  const touchedError = hasError && touched

  const onValueChange = (value?: string) => {
    form.setFieldValue(field.name, value)
  }

  const onBlur = () => form.setFieldTouched(field.name, true)

  const isShowPriceDisplayUser = useMemo(() => {
    if (
      !showPriceDisplay ||
      (!value && value !== 0) ||
      (!!value && value < 0) ||
      isNaN(value) ||
      !exchangeRate ||
      exchangeRate?.decimalDigits === 0 ||
      (!!exchangeRate?.decimalDigits && exchangeRate?.decimalDigits < 2)
    )
      return false
    return true
  }, [exchangeRate, value, showPriceDisplay])

  return (
    <div className={className}>
      {label && (
        <Text
          className={classNames(
            'd--block',
            !description && 'm__b--8',
            labelClassName
          )}
        >
          {label}
        </Text>
      )}
      {description && (
        <Text className={classNames('d--block m__b--8', descriptionClassName)}>
          {description}
        </Text>
      )}
      <Form.Item
        help={submittedError || touchedError ? hasError : false}
        validateStatus={submittedError || touchedError ? 'error' : 'success'}
      >
        <div className="ant-input-price">
          {prefix && !prefixInline && (
            <div
              className={classNames(
                'ant-input-price__prefix',
                submittedError ||
                  (touchedError && 'ant-input-price__prefix--has-error')
              )}
            >
              <Text preset="semibold18">{prefix}</Text>
            </div>
          )}
          <CurrencyInput
            className={classNames(
              'ant-input',
              prefixInline
                ? 'ant-input-price__input--prefix-inline'
                : 'ant-input-price__input'
            )}
            name={name}
            placeholder={placeholder}
            prefix={prefix && prefixInline ? prefix : undefined}
            defaultValue={defaultValue}
            value={!isNaN(value) ? value : undefined}
            decimalsLimit={decimalsLimit}
            onBlur={onBlur}
            onValueChange={onValueChange}
          />
        </div>
        {isShowPriceDisplayUser && (
          <Text className="m__t--8 font__size--small font__opacity--regular">
            <span>Price display to the end user </span>
            <b>
              {value == 0
                ? 'Free'
                : `${formatterCurrencyEXRate(exchangeRate).format(
                    Number(getRoundingPriceLocal(value || 0, exchangeRate)) || 0
                  )}`}
            </b>
          </Text>
        )}
      </Form.Item>
    </div>
  )
}
