/**
 * @Author: ??
 * @Date: ??
 */
import React, { useCallback, useState } from "react";
import { TransferFundsModalProps } from "./interface";
import { Modal, ModalProps } from "../../index";
import { Transfer } from "@icons/Transfer";
import { IconCom } from "@icons/index";
import "./index.css";
import { Select, SelectProps } from "@atomintl/aui-next";
import { mapObjIndexed } from "ramda";

const { Option } = Select;

/**
 * ### 引用方法
 * ```tsx
 * import { TransferFundsModal } from "@atomintl/exchange-ui";
 * ```
 */
export const TransferFundsModal: React.FC<TransferFundsModalProps & ModalProps> = props => {
  const accounts = {
    "1": "币币账户",
    "2": "杠杆账户",
    "3": "合约账户"
  };
  const accountsKeys = Object.keys(accounts);
  const [from, setFrom] = useState<"1" | "2" | "3">("1");
  const [to, setTo] = useState<"1" | "2" | "3">("2");

  const onOkCb = useCallback(() => {
    // onConfirm?.({
    //   type,
    //   marginNum,
    // });
  }, []);
  const remainder = () => {
    let _lastKey: string = "";
    for (const k in accounts) {
      if (k != from && k != to) {
        _lastKey = k;
        break;
      }
    }
    return { value: _lastKey, label: accounts[_lastKey] };
  };
  return (
    <>
      <Modal
        title="划转"
        cancelText=""
        okText="确认"
        confirmConfig={{ color: "primary", className: "h-[48px]", size: "large" }}
        onOk={onOkCb}
        hideActions
        {...props}
      >
        <div className={`text-[14px]`}>
          <div className={`flex items-end justify-between`}>
            <div>
              <div className={`mb-[6px] text-derive-11`}>从</div>
              <Select value={from} label={accounts[from]} style={{ width: 198, height: 48 }}>
                <Option value={from}>{accounts[from]}</Option>
                <Option value={remainder().value}>{remainder().label}</Option>
              </Select>
            </div>
            <div className={`text-blue cursor-pointer py-[8px] flex items-end`}>
              <Transfer />
            </div>
            <div>
              <div className={`mb-[6px] text-derive-11`}>到</div>
              <Select
                value={to}
                label={accounts[to]}
                style={{ width: 198, height: 48 }}
                // onChange={value => {
                //   console.log(value)
                //   const _its = ACCOUNTS.filter(x => x.value == value);
                //   console.log(_its)
                //   setAccounts([ accounts[0], { value, label: _its[0].label } ])
                // }}
              >
                <Option value={to}>{accounts[to]}</Option>
                <Option value={remainder().value}>{remainder().label}</Option>
              </Select>
            </div>
          </div>
          <div className={`mt-[33px]`}>
            <div className={`text-derive-11 mb-[6px]`}>币种</div>
            <Select
              value={"1"}
              label={
                <div className={`flex items-center`}>
                  <span>BTC</span> <h5>Bitcoin</h5>
                </div>
              }
              // onChange={setType}
              style={{ width: 452, height: 48 }}
            >
              <Option value="1">{"BTC"}</Option>
              <Option value="2">{"USDT"}</Option>
              <Option value="3">{"ETH"}</Option>
            </Select>
          </div>
          <div className={`text-[#ff3b30] my-[6px]`}>当前币种无可划转资产，请选择其他币种</div>
          <div>
            <div className={`flex items-center justify-between`}>
              <div>数量</div>
              <div>0.00000000 可用资产 / 0.00000000 下单冻结</div>
            </div>
            <div
              className={`w-[452px] h-[48px] bg-derive rounded-[4px] flex items-center justify-between px-[16px] py-[6px]`}
            >
              <input type="number" className={`flex-auto outline-none bg-transparent font-bold`} />
              <span className={`px-[12px]`}>x</span>
              <div className={`text-blue text-[16px]`}>全部</div>
            </div>
            <div className={`text-[#ff3b30]`}>划转数量超出可用资产</div>
          </div>

          <div
            className={`w-[452px] h-[48px] bg-derive-13 rounded-[4px] flex items-center justify-center text-white text-[16px] my-[8px]
             cursor-pointer`}
          >
            确认
          </div>
        </div>
      </Modal>
    </>
  );
};

TransferFundsModal.defaultProps = {};

export type { TransferFundsModalProps };
export default TransferFundsModal;