import React, { useState } from "react";
import { DownOutlined } from "@ant-design/icons";
import { Form, Radio, Space, Switch, Table } from "antd";
import "./index.css";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: "Address",
    dataIndex: "address",
    filters: [
      {
        text: "London",
        value: "London",
      },
      {
        text: "New York",
        value: "New York",
      },
    ],
    onFilter: (value, record) => record.address.indexOf(value) === 0,
  },
  {
    title: "Action",
    key: "action",
    sorter: true,
    render: () => (
      <Space size="middle">
        <a>Delete</a>
        <a>
          <Space>
            More actions
            <DownOutlined />
          </Space>
        </a>
      </Space>
    ),
  },
];

export const TableNewDemo = (props) => {
  const {} = props;

  const data = [];

  for (let i = 1; i <= 10; i++) {
    data.push({
      key: i,
      name: "John Brown",
      age: Number(`${i}2`),
      address: `New York No. ${i} Lake Park`,
      description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
  }

  const [top, setTop] = useState("none");
  const [bottom, setBottom] = useState("bottomRight");
  const [yScroll, setYScroll] = useState(false);
  const [xScroll, setXScroll] = useState();

  const scroll = {};

  if (yScroll) {
    scroll.y = 240;
  }

  if (xScroll) {
    scroll.x = "100vw";
  }

  const tableColumns = columns.map((item) => ({
    ...item,
  }));

  if (xScroll === "fixed") {
    tableColumns[0].fixed = true;
    tableColumns[tableColumns.length - 1].fixed = "right";
  }

  return (
    <div style={{ display: "flex", direction: "column" }}>
      <Table
        {...props}
        pagination={{
          position: [top, bottom],
        }}
        columns={tableColumns}
        dataSource={data || []}
        scroll={scroll}
      />
    </div>
  );
};