/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import { NumberSelectorProps } from "../../data/Props";
import { CommonTitle } from "../title/CommonTitle";
import NumberSelectorStyle from "./number_selector.module.css";
export function NumberSelector(props: NumberSelectorProps) {
  const [value, setValue] = useState(props.defaultValue);
  useEffect(() => {
    props.valueChanged(value);
  }, [value]);
  return (
    <div style={props.styles}>
      <CommonTitle {...props}></CommonTitle>
      <div className={NumberSelectorStyle.selector}>
        <div className={NumberSelectorStyle.title}>商品数量</div>
        <div style={{ flex: 1 }}></div>
        <div
          className={NumberSelectorStyle.button}
          onClick={() => {
            if (value > 1) {
              setValue(value - 1);
            }
          }}
        >
          -
        </div>
        <div className={NumberSelectorStyle.number}>
          <div className={NumberSelectorStyle.text}>{value}</div>
        </div>
        <div
          className={NumberSelectorStyle.button}
          onClick={() => {
            if (props.max) {
              if (value < props.max) {
                setValue(value + 1);
              }
            } else {
              setValue(value + 1);
            }
          }}
        >
          +
        </div>
      </div>
    </div>
  );
}
