/**
 * @Author: ??
 * @Date: ??
 */
import React from "react";
import { TableProps, ColumnProps } from "./interface";
import { BaseTable, BaseTableProps } from "ali-react-table";
import cx from "clsx";
import styled from "styled-components";
import "./index.css";

const CustomBaseTable: any = styled(BaseTable)`
  & {
    --bgcolor: transparent;
    --header-bgcolor: rgba(255 255 255);
    --hover-bgcolor: rgba(116, 116, 128, 0.08);
    --header-color: rgba(60, 60, 67, 0.6);
    --color: rgba(0 0 0);
    --border-color: transparent;
    --lock-shadow: rgb(37 37 37 / 0.5) 0 0 6px 2px;
    --header-hover-bgcolor: transparent;
    --highlight-bgcolor: transparent;
    --header-highlight-bgcolor: transparent;
  }
  ,
  .art-horizontal-scroll-container {
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    //::-webkit-scrollbar-thumb {
    //  background: rgba(123, 130, 145, 0.3);
    //  border-radius: 5px;
    //  // &:hover {
    //  //   background: var(--scrollbar-thumb-hover);
    //  // }
    //}

    //::-webkit-scrollbar-track {
    //  // background: var(--scrollbar-track);
    //  background-color: transparent;
    //  box-shadow: none;
    //}
  }
`;
const EmptyTable = () => {
  return <div className={`w-full h-full`}>It's Empty</div>;
};
export const Columns: React.FC<ColumnProps> = () => null;
/**
 * ### 引用方法
 * ```tsx
 * import { Table } from "@atomintl/exchange-ui";
 * ```
 * ##### 更多ali-react-table props详见 https://ali-react-table.js.org/docs/table/advanced-usage/
 */
export const Table: React.FC<TableProps> = props => {
  const CustomBaseTableComp = React.forwardRef<BaseTable, BaseTableProps>((props, ref) => {
    return (
      <CustomBaseTable
        ref={ref}
        className={cx(props.className)}
        components={{
          EmptyContent: EmptyTable
        }}
        {...props}
      />
    );
  });
  return <CustomBaseTableComp {...props} />;
};

Table.defaultProps = {};

export type { TableProps, ColumnProps };
export default Table;