import * as React from "react";
import type { ComponentStory, ComponentMeta } from "@storybook/react";
import { Table } from "../src";
import { Columns } from "../src/components/Table";
import { Calandar } from "../src/public/icons/Calandar"
import { IconCom } from "../src/public/icons"
import { Button } from "@atomintl/aui-next"

export default {
  title: "lib/Table",
  component: Table,
  subcomponents: { Columns }
} as ComponentMeta<typeof Table>

const dataSource = [
  { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
  { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' },
  { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' },
  { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' },
  { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' },
]
const columns = [
  { code: 'prov', name: '省份', width: 150 },
  { code: 'confirmed', name: '确诊', width: 100, align: 'right' },
  { code: 'cured', name: '治愈', width: 100, align: 'right' },
  { code: 'dead', name: '死亡', width: 100, align: 'right' },
  { code: 't', name: '最后更新时间', width: 180 },
]
const Template: ComponentStory<typeof Table> = args => {
  return <Table dataSource={dataSource} columns={columns} {...args}/>
}

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

export const WithContractData = Template.bind({});
WithContractData.args = {
  columns: [
    { code: 'a', name: '合约', width: 150 },
    { code: 'b', name: '杠杆', width: 150 },
    { code: 'c', name: '数量', width: 150 },
    { code: 'd', name: '开仓', width: 150 },
    { code: 'e', name: '标记', width: 150 },
    {
      code: 'f',
      name: <div>
        <Button>一键平仓</Button>
      </div>,
      width: 150
    },
  ],
  dataSource: [
    {
      a: <div className='text-red-500'>|BTCUSDT逐仓</div>,
      b: <div className='flex items-center'>
        20X <IconCom><Calandar/></IconCom>
      </div>,
      c: <div className='text-[#34c759]'>0.00001BTC</div>,
      d: <div className='text-[#ff9500]'>22,361.00</div>,
      e: <div>30,000.00</div>,
      f: <div>
        <Button variant="outlined" className='rounded-[4px]'>市价平仓</Button>
      </div>
    },
  ]
}

export const Loading = Template.bind({});
Loading.args = {
  isLoading: true,
  components: {
    LoadingIcon: () => <div className='text-center'>here is a loading icon</div>,
  }
}