import React from "react";

import PropTypes from "prop-types";

import "../FulFillCardVer2.scss";

const FulFillCardVer2 = ({
  items,
  text1,
  text2,
  text3,
  text4,
  textcolumn1,
  textcolumn2,
  textcolumn3
}) => {
  return (
    <div className="fulfillcardver2-div-block-2">
      <h3 className="fulfillcardver2-heading2">
        {text1}
        <br />
      </h3>
      <div id="w-node-617404893b43" className="fulfillcardver2-div-block">
        <div className="fulfillcardver2-text-block">
          {text2}
          <br />
        </div>
      </div>
      <div className="fulfillcardver2-container--fulfill w-container">
        <div className="w-layout-grid fulfillcardver2-grid-2">
          <div
            id="w-node-55d1834fae2f"
            className="fulfillcardver2-text-block-8"
          >
            {textcolumn1}
          </div>
          <div
            id="w-node-48697d67703c"
            className="fulfillcardver2-text-block-10"
          >
            {textcolumn2}
          </div>
          <div
            id="w-node-ba474be092c0"
            className="fulfillcardver2-text-block-9"
          >
            {textcolumn3}
            <br />
          </div>
        </div>
        <div className="fulfillcardver2-div-block-3" />

        {items.map(data => (
          <>
            <div className="w-layout-grid fulfillcardver2-grid-2">
              <div
                id="w-node-5431a93cfdca"
                className="fulfillcardver2div-block-7"
              >
                <div
                  id="w-node-5431a93cfdcb"
                  className="fulfillcardver2-div-block-5"
                >
                  <img
                    src={data.image}
                    alt="true"
                    className="fulfillcardver2-image"
                  />
                </div>
                <div id="w-node-5431a93cfdcd">
                  <a
                    href={data.link}
                    target="_blank"
                    className="fulfillcardver2-link"
                  >
                    {data.name}
                    <br />
                  </a>
                  <div>
                    {data.sku}
                    <br />
                  </div>
                  <div>
                    {data.type}
                    <br />
                  </div>
                </div>
              </div>
              <div id="w-node-5431a93cfdd7">
                {data.weight}
                <br />
              </div>
              <div
                id="w-node-5431a93cfdda"
                className="fulfillcardver2-form-block w-form"
              >
                <form id="email-form" name="email-form" data-name="Email Form">
                  <input
                    type="tel"
                    className="fulfillcardver2-text-field w-input"
                    disabled="true"
                    maxLength={256}
                    name="name-2"
                    data-name="Name 2"
                    placeholder=""
                    value={data.badge}
                    id="name-2"
                  />
                </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="fulfillcardver2-div-block-3" />
          </>
        ))}
      </div>
      {/* <div className="fulfillcardver2-text-block-4">
        <strong>{text3} </strong>
        <span className="fulfillcardver2-text-span">
          <strong className="fulfillcardver2-bold-text">({text4})</strong>
        </span>
      </div> */}
    </div>
  );
};

FulFillCardVer2.propTypes = {
  /** The text1 for the text1 */
  text1: PropTypes.string,
  /** The text2 of the text2 */
  text2: PropTypes.string,
  /** The textcolumn1 of the textcolumn1 */
  textcolumn1: PropTypes.string,
  /** The textcolumn2 of the textcolumn2 */
  textcolumn2: PropTypes.string,
  /** The textcolumn3 of the textcolumn3 */
  textcolumn3: PropTypes.string,
  /** The items of the table */
  items: PropTypes.arrayOf(
    PropTypes.shape({
      image: PropTypes.string,
      badge: PropTypes.string,
      name: PropTypes.string,
      link: PropTypes.string,
      sku: PropTypes.string,
      type: PropTypes.string,
      weight: PropTypes.string
    })
  ),
  /** The text3 of the text3 */
  text3: PropTypes.string,
  /** The text3 of the text3 */
  text4: PropTypes.string
};
FulFillCardVer2.defaultProps = {
  text1: "Mark as fulfilled",
  text2: "QUANTITY TO FULFILL",
  textcolumn1: "Items",
  textcolumn2: "Quantity",
  textcolumn3: "Weight",
  items: [
    {
      image:
        "https://uploads-ssl.webflow.com/5bbed931f8149f332875c562/5bbf02acbd08906c00233766_Printer_small.jpg",
      badge: "1 of 1",
      name: "Faxtex Product Sample",
      link: "#0",
      sku: "SKU: 4827521",
      type: "M / Blue",
      weight: "0kg"
    },
    {
      image:
        "https://cdn.shopify.com/s/files/1/0053/4508/3490/products/Photocamera_small.jpg?v=1538713910",
      badge: "5 of 10",
      name: "Donkix Product Sample",
      link: "#0",
      type: "M / Red / 1 Year",
      weight: "0kg"
    }
  ],
  text3: "TRACKING INFORMATION ",
  text4: "OPTIONAL"
};

export default FulFillCardVer2;