import React from 'react';
import { Wrapper, Primary, Secondary } from './priceQuantityInput.styles';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';

const PriceQuantityInput = ({
  label,
  value,
  price,
  min,
  max,
  step,
  defaultValue,
  disabled,
  onChange,
  children
}) => {
  const handleChange = delta => {
    let updated = value + delta;
    if (updated >= max) updated = max;
    if (updated <= min) updated = min;
    onChange(updated);
  };

  return /*#__PURE__*/React.createElement(Wrapper, {
    expand: !!children && value > 0
  }, /*#__PURE__*/React.createElement(Primary, {
    value: value,
    disabled: !!disabled
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    onClick: () => handleChange(-(step || 1))
  }, /*#__PURE__*/React.createElement(MinusOutlined, null))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, value || defaultValue || 0)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    onClick: () => handleChange(step || 1)
  }, /*#__PURE__*/React.createElement(PlusOutlined, null)))), /*#__PURE__*/React.createElement("div", null, label), price && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, value >= 1 ? `+$${price * value}` : `$${price} ea`), value >= 2 ? /*#__PURE__*/React.createElement("div", null, "$", price, " ea") : null)), /*#__PURE__*/React.createElement(Secondary, null, children));
};

export default PriceQuantityInput;