import React, { useState } from "react";
import { OrderBookProps } from "@components/OrderBook/interface";
import { Tabs } from "../../index";
import "./index.css";
import { EntrustBoth } from "@icons/EntrustBoth";
import { IconCom } from "@icons/index";
import { EntrustGreen } from "@icons/EntrustGreen";
import { EntrustRed } from "@icons/EntrustRed";
import { Select } from "@atomintl/aui-next";
import List from "./List";

const { Option } = Select;
/**
 * ### 引用方法
 * ```tsx
 * import { OrderBook } from "@atomintl/exchange-ui";
 * ```
 */
const OrderBook: React.FC<OrderBookProps> = props => {
  const TabPane = Tabs.TabPane;
  const {} = props;
  const EntrustIcons = [
    { icon: <EntrustBoth />, value: 0 },
    { icon: <EntrustGreen />, value: -100 },
    { icon: <EntrustRed />, value: 100 }
  ];
  const [type, setType] = useState<number>(0);

  return (
    <>
      <Tabs defaultActiveKey={"1"} classes={{ root: `orderBookRoot`, tab: `orderBookTab` }}>
        <TabPane tab={`委托列表`} key={`1`}>
          <div className={` py-[10px] max-w-[320px]`}>
            <div className={`flex items-center justify-between  px-[16px]`}>
              <div>
                {EntrustIcons.map((_item, _index) => (
                  <div
                    key={_item.value}
                    className={`border rounded-[4px] inline-block p-[5px] mr-[10px] ${
                      type === _item.value ? "border-blue" : "border-gray-4"
                    }`}
                    onClick={() => setType(_item.value)}
                  >
                    <IconCom>{_item.icon}</IconCom>
                  </div>
                ))}
              </div>
              <Select
                style={{
                  background: "transparent",
                  width: "auto"
                }}
                labelProps={{
                  className: "selectLabelProps"
                }}
                iconProps={{
                  className: "selectIconProps"
                }}
                placement={`right`}
                value={"0.5"}
              >
                <Option key={"0.5"}>0.5</Option>
                <Option key={"1"}>1</Option>
              </Select>
            </div>
            <List type={type} rows={Math.abs(type)} />
          </div>
        </TabPane>
        <TabPane tab={`最近成交`} key={`2`}>
          最近成交
        </TabPane>
      </Tabs>
    </>
  );
};

OrderBook.defaultProps = {};

export type { OrderBookProps };
export default OrderBook;