import React from "react";
import PropTypes from "prop-types";
import "./Table.scss";

const Table = ({ children, textHeader, column1, column2, column3, items }) => {
  return (
    <div className="key46--table--container">
      {children}
      <div className="key46--table--controler">
        <div className="key46--table--container-div-block-3">
          {textHeader.map((data, i) => {
            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 => (
        <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.propTypes = {
  /** Table label */
  children: PropTypes.node.isRequired,
  /** textHeader for the table */
  textHeader: PropTypes.arrayOf(PropTypes.string),
  /** The column1 for the table */
  column1: PropTypes.string,
  /** The column2 for the table */
  column2: PropTypes.string,
  /** The column3 for the table */
  column3: PropTypes.string,
  /** The items for the table */
  items: PropTypes.arrayOf(
    PropTypes.shape({
      /** The columnItem1 for the table */
      columnItem1: PropTypes.string,
      /** The columnItem1OnClick for the table */
      columnItem1OnClick: PropTypes.func,
      /** The columnItem2 for the table */
      columnItem2: PropTypes.string,
      /** The columnItem3 for the table */
      columnItem3: PropTypes.string
    })
  )
};

Table.defaultProps = {
  children: "",
  textHeader: ["ALL", "UNUSED"],
  column1: "ISBN",
  column2: "TITLE",
  column3: "AUTHOR",
  items: [
    {
      columnItem1: "1783551623, 9781783551620",
      columnItem1OnClick: event => {
        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;