import React, { FC, useState } from "react";
import "./index.css";
import ItemComp from "./ItemComp";
import { formatFloor, formatMoney } from "@utils/FormatNumber";

export interface ListProps {
  type: number;
  rows: number;
}
const List: FC<ListProps> = props => {
  const { type } = props;
  const asks = [
    ["10823.00000000", "0.004000"],
    ["10823.20000000", "0.010000"],
    ["10823.20000000", "0.010000"],
    ["10823.20000000", "0.010000"],
    ["10823.20000000", "0.010000"],
    ["10823.20000000", "0.010000"]
  ];
  const bids = [
    ["10821.20000000", "0.002000"],
    ["10821.10000000", "0.005000"],
    ["10821.10000000", "0.005000"],
    ["10821.10000000", "0.005000"],
    ["10821.10000000", "0.005000"],
    ["10821.10000000", "0.005000"],
    ["10821.10000000", "0.005000"]
  ];
  const [convertedAsks, setConvertedAsks] = useState(asks);
  const [convertedBids, setConvertedBids] = useState(bids);
  return (
    <>
      <div>
        <ItemComp
          className={`my-[6px]`}
          left={`价格(USDT)`}
          leftClassName={`text-derive-11`}
          center={`数量(BTC)`}
          centerClassName={`text-derive-11`}
          right={`合计(BTC)`}
          rightClassName={`text-derive-11`}
        />
        {type >= 0
          ? convertedAsks.map((_item, _index) => (
              <ItemComp
                key={_index}
                className={`my-2px`}
                left={formatMoney(formatFloor(_item[0], 2))}
                leftClassName={`text-red`}
                center={formatFloor(_item[1], 3)}
                right={formatFloor(180.55999, 3)}
                process={{
                  color: `bg-derive-32`,
                  value: 100
                }}
              />
            ))
          : null}
        {type === 0 ? (
          <div className={`flex items-center font-bold px-[16px]`}>
            <div className={`text-red text-[18px] my-[8px]`}>{formatMoney(formatFloor(19088.601234, 2))}</div>
            <div className={`text-red`}>↓</div>
            <div className={`text-derive-11 text-[12px] border-b border-derive-11 border-dashed ml-[11px]`}>
              {formatMoney(formatFloor(19088.601234, 2))}
            </div>
          </div>
        ) : null}
        {type <= 0
          ? convertedBids.map((_item, _index) => (
              <ItemComp
                key={_index}
                left={formatMoney(formatFloor(_item[0], 2))}
                leftClassName={`text-green`}
                center={formatFloor(_item[1], 3)}
                right={formatFloor(180.55999, 3)}
                process={{
                  color: `bg-derive-33`,
                  value: 58
                }}
              />
            ))
          : null}
      </div>
    </>
  );
};

export default List;