import React, { useState, useEffect } from "react";

import { OrderPreferenceConfirmProps } from "./interface";
import Modal from "@components/Modal";
import { Radio } from "@atomintl/aui-next";
import { TradeUnitEnum } from "@shared/types";

/**
 * 下单偏好设置组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { OrderPreferenceConfirm } from "@atomintl/exchange-ui"
 * ```
 */
const OrderPreferenceConfirm: React.FC<OrderPreferenceConfirmProps> = props => {
  const { open, value, options, onOk } = props;

  const [preference, setPreference] = useState<TradeUnitEnum>(TradeUnitEnum.Quantity);

  useEffect(() => {
    if (open && typeof value !== "undefined") {
      setPreference(value);
    }
  }, [value, open]);

  const onConfirm = () => {
    onOk?.(preference);
  };

  return (
    <Modal
      title={"下单偏好设置"}
      cancelText="取消"
      okText="确认"
      classes={{ content: "!pt-[12px] !pb-[30px]" }}
      {...props}
      onOk={onConfirm}
    >
      <Radio.Group value={value} options={options} onChange={setPreference} />
    </Modal>
  );
};

OrderPreferenceConfirm.defaultProps = {};

export { OrderPreferenceConfirmProps } from "./interface";
export default OrderPreferenceConfirm;