import * as React from "react";
import type { ComponentStory, ComponentMeta } from "@storybook/react";
import { TickerList } from "../src";

export default {
  title: "复合组件/TickerList",
  component: TickerList
} as ComponentMeta<typeof TickerList>;

const Template: ComponentStory<typeof TickerList> = args => {
  const [currentSymbol, setCurrentSymbol] = React.useState("BTCUSDT");
  const [likes, setLikes] = React.useState([
    "ETHUSDTFP",
    "BTCUSDTFP",
    "THETAUSDTFP",
    "CAKEUSDT",
    "AABUSDT",
    "BTCUSDT",
    "TTMM1USDTFP",
    "LUNA2USDT",
    "ETHUSDT",
    "LUNAUSDT",
    "TTMM2USDTFP",
    "BTCUSDFP"
  ]);

  return (
    <TickerList
      {...args}
      tickerTradeTabList={[
        {
          label: "自选",
          value: "FAV"
        },
        {
          label: "U本位合約",
          value: "USDT"
        },
        {
          label: "幣本位合約",
          value: "BTC"
        }
      ]}
      currentSymbol={currentSymbol}
      dataSource={[
        {
          symbol: "BTCUSD",
          base: "BTC",
          quote: "USD",
          tickSize: "0.001",
          settleCurrency: "BTC",
          tradeType: "spot",
          latestPrice: 1922081.1,
          volume: 2081680000.8097,
          volumeScale: 2,
          change: -0.134243
        },
        {
          symbol: "AABUSDT",
          base: "AAB",
          quote: "USDT",
          tickSize: "0.01",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 192018.1,
          priceScale: 2,
          volume: 20286.8097,
          volumeScale: 2,
          change: 0.73243
        },
        {
          symbol: "BTCUSDT",
          base: "BTC",
          quote: "USDT",
          tickSize: "0.01",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 19277108.1,
          priceScale: 2,
          volume: 203868.8097,
          volumeScale: 2,
          change: -0.232432825
        },
        {
          symbol: "BCHUSDT",
          base: "BCH",
          quote: "USDT",
          tickSize: "0.01",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 191208.1,
          priceScale: 2,
          volume: 208468.8097,
          volumeScale: 2,
          change: -0.63243
        },
        {
          symbol: "XRPUSDT",
          base: "XRP",
          quote: "USDT",
          tickSize: "0.001",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 119208.1,
          priceScale: 2,
          volume: 208668.8097,
          volumeScale: 2,
          change: -0.23243
        },
        {
          symbol: "EOSUSDT",
          base: "EOS",
          quote: "USDT",
          tickSize: "0.01",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 193208.1,
          priceScale: 2,
          volume: 208688.8097,
          volumeScale: 2,
          change: -0.325432825
        },
        {
          symbol: "LTCUSDT",
          base: "LTC",
          tickSize: "0.01",
          settleCurrency: "USDT",
          quote: "USDT",
          tradeType: "spot",
          latestPrice: 195208.1,
          priceScale: 2,
          volume: 208648.8097,
          volumeScale: 2,
          change: -0.312432825
        },

        {
          symbol: "TRXUSDT",
          base: "TRX",
          quote: "USDT",
          tickSize: "0.001",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 197208.1,
          priceScale: 3,
          volume: 2086878.8097,
          volumeScale: 2,
          change: -0.132432825
        },
        {
          symbol: "TRXUSDT",
          base: "TRX",
          quote: "USDT",
          tickSize: "0.001",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 198208.1,
          priceScale: 3,
          volume: 2086845.8097,
          volumeScale: 2,
          change: -0.312432825
        },
        {
          symbol: "TRXUSDT",
          base: "TRX",
          quote: "USDT",
          tickSize: "0.001",
          settleCurrency: "USDT",
          tradeType: "spot",
          latestPrice: 192708.1,
          priceScale: 3,
          volume: 2086869.8097,
          volumeScale: 2,
          change: -0.332432825
        }
      ]}
      symbolPriceChartMaps={{
        AABUSDT: {
          t: [
            "1666227600",
            "1666229400",
            "1666231200",
            "1666233000",
            "1666234800",
            "1666236600",
            "1666238400",
            "1666240200",
            "1666242000",
            "1666243800",
            "1666245600",
            "1666247400",
            "1666249200",
            "1666251000",
            "1666252800",
            "1666254600",
            "1666256400",
            "1666258200",
            "1666260000",
            "1666261800",
            "1666263600",
            "1666265400",
            "1666267200",
            "1666269000"
          ],
          c: [
            "1281.50",
            "1279.50",
            "1279.50",
            "1280.50",
            "1281.50",
            "1280.50",
            "1280.50",
            "1280.51",
            "1286.51",
            "1294.51",
            "1293.50",
            "1291.51",
            "1289.45",
            "1293.50",
            "1292.50",
            "1291.50",
            "1293.50",
            "1293.51",
            "1293.51",
            "1293.51",
            "1293.51",
            "1293.51",
            "1293.51",
            "1293.51"
          ]
        },
        BTCUSDT: {
          t: [
            "1666042200",
            "1666044000",
            "1666045800",
            "1666047600",
            "1666049400",
            "1666051200",
            "1666053000",
            "1666054800",
            "1666056600",
            "1666058400",
            "1666060200",
            "1666062000",
            "1666063800",
            "1666065600",
            "1666067400",
            "1666069200",
            "1666071000",
            "1666072800",
            "1666074600",
            "1666175400",
            "1666177200",
            "1666179000",
            "1666180800",
            "1666182600"
          ],
          c: [
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000",
            "0.00496000"
          ]
        }
      }}
      favoritePairs={likes}
      rfColor={true}
      onChangeLikes={(symbol, like) => {
        console.log("onChangeLikes-record", symbol);

        const allLikes = ([] as string[]).concat(likes);

        if (like) {
          setLikes([...allLikes, symbol]);
        } else {
          setLikes(allLikes.filter(item => item !== symbol));
        }
      }}
      onChangeTickerPair={record => {
        console.log("onChangeTickerPair-record", record);

        setCurrentSymbol(record.symbol);
      }}
    />
  );
};

export const Normal = Template.bind({});
