import React from "react";
import { TickOff } from "@icons/TickOff";
import { MarginTypeEnum } from "@shared/types";

export interface PositionProps {
  label: string;
  value: MarginTypeEnum;
  disabled?: boolean;
}
export interface PositionRadioProps {
  marginType: MarginTypeEnum;
  onChange: (v: MarginTypeEnum) => void;
  disabledCross?: boolean;
  disabledIsolated?: boolean;
}
export const PosiRadio: React.FC<PositionRadioProps> = props => {
  const { marginType, onChange, disabledCross, disabledIsolated } = props;
  const positions: Array<PositionProps> = [
    { label: "全仓", value: MarginTypeEnum.Cross, disabled: disabledCross },
    { label: "逐仓", value: MarginTypeEnum.Isolated, disabled: disabledIsolated }
  ];

  const TickOffComp = React.memo(() => {
    return (
      <>
        <div className="bg-blue w-[16px] h-[16px] skew-y-[45deg] absolute -top-[8px] -right-[0px]"></div>
        <div className="absolute -top-[8px] right-[3px] w-[5px] h-[3px] text-white">
          <TickOff />
        </div>
      </>
    );
  });

  return (
    <>
      <div className="flex justify-between items-center">
        {positions.map((_item, _index) => (
          <div
            key={_item.value}
            className={`relative overflow-hidden w-[218px] h-[40px] flex justify-center items-center border rounded-[4px] ${
              _item.disabled ? "cursor-not-allowed" : "cursor-pointer"
            } text-[14px]
              ${
                _item.disabled
                  ? "border-[#2e3c3c43]"
                  : marginType === _item.value
                  ? "border-blue"
                  : "border-[#4c3c3c43]"
              }
              ${_item.disabled ? "text-[#3c3c432e]" : "text-[#3c3c4399]"}
              `}
            onClick={() => !_item.disabled && onChange(_item.value)}
          >
            {marginType === _item.value && !_item.disabled ? <TickOffComp /> : null}
            {_item.label}
          </div>
        ))}
      </div>
      <div className="mt-[16px]">
        {marginType === MarginTypeEnum.Cross
          ? `全仓模式下，仓位可自动调用相对应保证金账户的所有可用余额，避免强平。如果强平被触发，您将损失对应账户的所有可用余额。杠杆调整将会影响该交易对下所有的全仓仓位和全仓活动订单！`
          : `逐仓模式下，一定数额的保证金（起始保证金）将分配给某仓位，交易者可手动调整该仓位的保证金。如果强平被触发，交易者所需承担的最大损失即仓位保证金。杠杆调整将会影响该交易对下所有的逐仓仓位和逐仓活动订单！`}
      </div>
    </>
  );
};