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

import { PreferenceConfirmProps, PreferenceConfirmType } from "./interface";
import { Radio } from "@atomintl/aui-next";
import Modal from "@components/Modal";
import { Tabs } from "@components/Tabs";
import PriceGroup from "./PriceGroup";
import "./index.css";

const { TabPane } = Tabs;
/**
 * 偏好设置组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { PreferenceConfirm } from "@atomintl/exchange-ui"
 * ```
 */
const PreferenceConfirm: React.FC<PreferenceConfirmProps> = props => {
  const { defaultTab = PreferenceConfirmType.PositionMode, preview } = props;

  const [value, setValue] = useState(2);

  const [tabActive, setTabActive] = useState<PreferenceConfirmType>(defaultTab);

  const tips = useMemo(
    () =>
      tabActive === "positionMode"
        ? "若合约存在持仓或者挂单，不允许调整仓位模式。仓位模式调整对所有合约统一生效。"
        : "开启订单确认功能后，每次提交订单时都会跳出确认弹窗。该设置仅对U本位合约生效。",
    [tabActive]
  );

  useEffect(() => {
    setTabActive(defaultTab);
  }, [defaultTab]);

  return (
    <Modal
      {...props}
      hideActions={true}
      title={"偏好设置"}
      padding="none"
      PaperProps={{ className: "nts-preference-paper" }}
    >
      <div className="nts-preference-root">
        <Tabs
          activeKey={tabActive}
          orientation="vertical"
          onChange={key => setTabActive(key as PreferenceConfirmType)}
          classes={{ root: "nts-preference-tabs " }}
        >
          <TabPane key={PreferenceConfirmType.PositionMode} tab="仓位模式" />
          <TabPane key={PreferenceConfirmType.OrderConfirm} tab="下单确认" />
        </Tabs>
        <div className="nts-preference">
          {tabActive === PreferenceConfirmType.PositionMode ? (
            <Radio.Group
              value={value}
              options={[
                {
                  desc: "单向持仓模式下，一个合约只允许持有一个方向的仓位。",
                  disabled: true,
                  title: "单向持仓",
                  value: 1
                },
                {
                  desc: "双向持仓模式下，一个合约可允许同时持有多空两个方向的仓位，并且同一合约下不同方向仓位风险对冲。",
                  disabled: false,
                  title: "双向持仓",
                  value: 2
                }
              ]}
              onChange={(val: number) => setValue(val)}
            />
          ) : (
            <PriceGroup
              options={[{ label: "下单需二次确认", checked: preview }]}
              onChange={props.onOrderConfirmChange}
            />
          )}

          <p className="nts-preference-tips">{tips}</p>
        </div>
      </div>
    </Modal>
  );
};

PreferenceConfirm.defaultProps = {};

export { PreferenceConfirmProps, PreferenceConfirmType } from "./interface";
export default PreferenceConfirm;