/**
 * 账号面板
 */
import React, { FC, useMemo, useState, useCallback, useEffect } from "react";
import { EyeCloseIcon } from "@icons/EyeClose";
import { EyeOpenIcon } from "@icons/EyeOpen";
import { Cell } from "../Cell";
import { ActionButtonProps, ActionButton, ActionType } from "./ActionBtn";
import { IconCom } from "@icons/index";
import { LocalStore } from "@utils/localStore";
import { formatFloor, formatMoney } from "@utils/FormatNumber";
interface Props {
  coin?: string;
  avb?: string;
  unPnl?: string;
  scale?: number;
  buttonList?: ActionButtonProps[];
}
export const AccountBalance: FC<Props> = props => {
  const { coin = "", unPnl = 0, avb = 0, buttonList } = props;
  const scale = props.scale ?? 8;
  const [hide, setHide] = useState(false);

  useEffect(() => {
    const str = LocalStore.get("PLACE-BALANCE");
    if (str === "true") {
      setHide(true);
    }
  }, []);
  const handleToChangeStatus = useCallback(() => {
    const newStatus = !hide;
    setHide(newStatus);
    LocalStore.set("PLACE-BALANCE", String(newStatus));
  }, [hide]);

  const formatBalance = useCallback(
    (val: string | number) => {
      return formatMoney(formatFloor(val, scale));
    },
    [scale]
  );

  return (
    <div className="px-[16px]">
      <div className="text-gray-16 font-bold pb-[16px] flex items-center">
        合约账户
        <div className="ml-[8px] cursor-pointer" onClick={handleToChangeStatus}>
          <IconCom>{hide ? <EyeCloseIcon /> : <EyeOpenIcon />}</IconCom>
        </div>
      </div>
      <div className="mb-[10px]">
        <Cell label="钱包余额" value={formatBalance(avb)} unit={coin} className="mb-[6px]"></Cell>
        {/* <Cell label="未实现盈亏" value={formatBalance(unPnl)} unit={coin} className="mb-[6px]"></Cell> */}
      </div>
      <div className="grid grid-cols-3 gap-[9px]">
        {buttonList?.map(item => (
          <ActionButton key={item.type} {...item} />
        ))}
      </div>
    </div>
  );
};

export { ActionButtonProps, ActionType };