import React, { FC, useCallback, useState, memo } from "react";
import { Table } from "../../../index";
import { accountIncomeColumns } from "@components/OrderList/columnConfigs";
import { useFetch } from "@utils/request";
import DatePicker from "@components/DatePicker";
import { ArrowDown } from "@icons/ArrowDown";
import { Select } from "@atomintl/aui-next";
import "../index.css";
import { IncomeTypeEnum } from "@shared/types";
import { APINameEnum } from "@utils/request/ApiNameEnum";

const { Option } = Select;

export interface AccountIncomeProps {}
export const AccountIncome: FC<AccountIncomeProps> = memo(props => {
  const {} = props;
  const [[startTime, endTime], setTime] = useState<Array<number | null>>([]);
  const onDateStrChange = useCallback(([{ startV, endV }]: any) => setTime([startV, endV]), []);
  const [incomeType, setIncomeType] = useState<IncomeTypeEnum | "">("");

  const { data: accountIncomeSource, loading: accountIncomeSourceLoading } = useFetch(APINameEnum.ACCOUNT_INCOME, {
    startTime,
    endTime,
    incomeType
  });

  const onSelectChange = (v: IncomeTypeEnum | "") => setIncomeType(v);

  return (
    <>
      <div className={`flex items-center pl-[16px]`}>
        <DatePicker timeQuantum className={`my-[8px]`} onDateStrChange={onDateStrChange} initSinceWhen={"d"} />
        <Select
          className={`ml-[24px]`}
          labelProps={{
            className: `accountIncomeLabelStyles`
          }}
          icon={<ArrowDown />}
          iconProps={{
            className: `flex items-center justify-center p-0 m-0`,
            style: {
              width: 7,
              height: 4,
              marginLeft: 6
            }
          }}
          value={incomeType}
          label={"所有"}
          style={{ background: "transparent", color: "#000", fontSize: 14, fontWeight: 500 }}
          onChange={onSelectChange}
        >
          <Option value={""}>{"所有"}</Option>
          <Option value={"transfer"}>{"划转"}</Option>
          <Option value={"realProfit"}>{"已实现盈亏"}</Option>
          <Option value={"fundingFee"}>{"资金费用"}</Option>
          <Option value={"openFee"}>{"手续费"}</Option>
          <Option value={"liquidationFee"}>{"强平费用"}</Option>
        </Select>
      </div>
      <Table
        columns={accountIncomeColumns}
        dataSource={accountIncomeSource?.list}
        isLoading={accountIncomeSourceLoading}
      />
    </>
  );
});