import React, { ReactNode } from "react";
import "./Table.scss";
type item = {
  columnItem1?: string;
  columnItem1OnClick?: (...args: any[]) => any;
  columnItem2?: string;
  columnItem3?: string;
};
type TableProps = {
  children?: ReactNode;
  textHeader?: string[];
  column1?: string;
  column2?: string;
  column3?: string;
  items?: item[];
};
const Table: React.SFC<TableProps> = ({
  children,
  textHeader,
  column1,
  column2,
  column3,
  items
}: TableProps) => {
  return (
    <div className="key46--table--container">
      {children}
      <div className="key46--table--controler">
        <div className="key46--table--container-div-block-3">
          {textHeader.map((data: string, i: number) => {
            if (i === 0)
              return (
                <div className="key46--table--header-text-block">{data}</div>
              );
            return <div className="key46--table-text-block-2">{data}</div>;
          })}
        </div>
        <div
          id="w-node-784f3efd7d47"
          className="key46--table--container-form-block w-form"
        >
          <form
            id="email-form"
            name="email-form"
            data-name="Email Form"
            className="key46--table-form"
          >
            <select
              id="Newest-2"
              name="Newest-2"
              data-name="Newest 2"
              className="key46--table-select-field w-select"
            >
              <option value="Newest">Newest</option>
              <option value="Latest">Latest</option>
            </select>
          </form>
          <div className="w-form-done">
            <div>Thank you! Your submission has been received!</div>
          </div>
          <div className="w-form-fail">
            <div>Oops! Something went wrong while submitting the form.</div>
          </div>
        </div>
      </div>
      <div className="key46--table-key46--table key46--table-header--table">
        <div id="w-node-8aa488185207">{column1}</div>
        <div id="w-node-8aa48818520b">{column2}</div>
        <div id="w-node-8aa488185209">{column3}</div>
      </div>
      {items.map((data: item) => (
        <div className="key46--table-key46--table">
          <a
            href="#0"
            id="w-node-e5e7c1e07ae1"
            className="key46--table-link"
            onClick={data.columnItem1OnClick}
          >
            {data.columnItem1}
          </a>
          <div id="w-node-5902a5b39d47">{data.columnItem2}</div>
          <div id="w-node-5902a5b39d45">{data.columnItem3}</div>
        </div>
      ))}
      <div className="key46--table-div-block-4">
        <div>&lt;</div>
        <div>Back</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>...</div>
        <div>12</div>
        <div>Next</div>
        <div>&gt;</div>
      </div>
    </div>
  );
};
Table.defaultProps = {
  children: "",
  textHeader: ["ALL", "UNUSED"],
  column1: "ISBN",
  column2: "TITLE",
  column3: "AUTHOR",
  items: [
    {
      columnItem1: "1783551623, 9781783551620",
      columnItem1OnClick: (event: React.MouseEvent<HTMLElement>) => {
        console.log("You have clicked me!", event.target);
      },
      columnItem2:
        "React.js Essentials: A Fast-paced Guide to Designing and Building Scalable and Maintainable Web Apps With React.js",
      columnItem3: "Artemij Fedosejev"
    }
  ]
};
export default Table;