import React from "react"
import {
  CurrencyUnit,
  InputNumberBlock,
  InputNumberStyled,
  QuantityControl,
} from "./styled"

interface Props {
  value: number
  color: string
  width: number
  outline: boolean
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  onChangeQuantity?: (name: string, value: any) => void
  name: string
  currency?: string
  hasControl?: boolean
}

const InputNumberField = (props: Props) => {
  const {
    value,
    color,
    width,
    outline = false,
    onChange,
    onChangeQuantity,
    name,
    currency,
    hasControl = false,
  } = props

  return (
    <>
      <InputNumberBlock>
        {hasControl && (
          <QuantityControl
            onClick={() =>
              onChangeQuantity && onChangeQuantity(name, value - 1)
            }
            background="none"
            color="#939aa1"
            borderColor="#939aa1"
          >
            -
          </QuantityControl>
        )}
        <InputNumberStyled
          onChange={onChange}
          name={name}
          type="text"
          value={value}
          color={color}
          width={width}
          outline={outline}
        />
        {hasControl && (
          <QuantityControl
            onClick={() =>
              onChangeQuantity && onChangeQuantity(name, value + 1)
            }
            background="#f9bd05"
            color="#ffffff"
          >
            +
          </QuantityControl>
        )}
      </InputNumberBlock>

      {currency && (
        <>
          &nbsp;<CurrencyUnit color={"#3abb88"}>đ</CurrencyUnit>
        </>
      )}
    </>
  )
}

export default InputNumberField