import React from "react";
import {
  TextInput,
  TextareaInput,
  SelectInput,
  CheckInput,
} from "../formfields.jsx";
import Image from "next/image";
import Dropzone from "../Dropzone.jsx";

const dropzoneStyle = {
  width: "100%",
  height: "auto",
  borderWidth: 2,
  borderColor: "rgb(102, 102, 102)",
  borderStyle: "dashed",
  borderRadius: 5,
};

export default class PartForm extends React.Component {
  constructor(props) {
    super(props);

    this._handleModalShow = this._handleModalShow.bind(this);
    this._handleModalHide = this._handleModalHide.bind(this);

    this.state = {
      show: false,
      modalindex: 0,
      newmodaldata: {},
    };
  }

  _handleModalShow(index) {
    this.setState({
      show: true,
      modalindex: index,
    });
  }

  _handleModalHide(index) {
    this.setState({
      show: false,
    });
  }

  render() {
    const that = this;
    const props = this.props;

    return (
      <>
        {this.state.show && (
          <Overlay
            index={this.state.modalindex}
            show={this.state.show}
            handleHide={this._handleModalHide}
            {...props}
          />
        )}

        <div className="row g-2 mb-5">
          <div className="col">
            <h1>Produktionsdaten</h1>
          </div>
        </div>

        <div className="row g-2 mb-5">
          <div className="col">
            <table className="table mt-5">
              <thead className="table-secondary">
                <tr>
                  <th>Name</th>
                  <th>Material</th>
                  <th>Anzahl</th>
                  <th>Anzahl Dateien</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {props.values.parts.map(function (part, index) {
                  return (
                    <tr key={index}>
                      <td>{part.name}</td>
                      <td>{part.material}</td>
                      <td>{part.amount}</td>
                      <td>{part.files.length}</td>
                      <td colSpan="1">
                        <button
                          type="button"
                          className={`btn btn-dark text-center m-0`}
                          onClick={that._handleModalShow.bind(this, index)}
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            className="bi bi-pencil-square"
                            viewBox="0 0 16 16"
                          >
                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                            <path
                              fillRule="evenodd"
                              d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
                            />
                          </svg>
                        </button>

                        <button
                          type="button"
                          className={`btn btn-danger text-center m-0`}
                          onClick={() => console.log("Edit")}
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            className="bi bi-x-square"
                            viewBox="0 0 16 16"
                          >
                            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                          </svg>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </>
    );
  }
}

function Overlay(props) {
  return (
    <div className="modal" tabIndex="-1" style={{ display: "block" }}>
      <div className="modal-dialog modal-fullscreen">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              {props.values.parts[props.index]["name"]}
            </h5>
            <button
              type="button"
              className="btn-close bg-white"
              data-bs-dismiss="modal"
              aria-label="Close"
              onClick={props.handleHide}
            ></button>
          </div>
          <div className="modal-body">
            <div className="container">
              <div className="row">
                <div className="col">
                  <div className="row g-2 mb-3">
                    <h3>Angaben</h3>
                    <div className="col">
                      <TextInput
                        isSubmitting={props.isSubmitting}
                        // error={props.errors.parts[props.index]["name"]}
                        // touched={props.touched.parts[props.index]["name"]}
                        placeholder={"Metallteil 123"}
                        onChange={props.handleChange(
                          `parts[${props.index}].name`
                        )}
                        // onBlur={
                        //   props.handleBlur.values.parts[props.index]["name"]
                        // }
                        value={props.values.parts[props.index]["name"]}
                        label="Name"
                        type="text"
                      />
                    </div>
                    <div className="col">
                      <TextInput
                        isSubmitting={props.isSubmitting}
                        // error={props.errors.parts[props.index]["amount"]}
                        // touched={props.touched.parts[props.index]["amount"]}
                        placeholder={"123"}
                        onChange={props.handleChange(
                          `parts[${props.index}].amount`
                        )}
                        // onBlur={props.handleBlur("amount")}
                        value={props.values.parts[props.index]["amount"]}
                        label="Anzahl"
                        type="text"
                      />
                    </div>
                  </div>
                  <div className="row g-2 mb-3">
                    <div className="col">
                      <TextareaInput
                        isSubmitting={props.isSubmitting}
                        // error={props.errors.parts[props.index]["description"]}
                        // touched={props.touched.parts[props.index]["description"]}
                        placeholder={"Metallteil 123"}
                        onChange={props.handleChange(
                          `parts[${props.index}].description`
                        )}
                        onBlur={props.handleBlur(
                          `parts[${props.index}].description`
                        )}
                        value={props.values.parts[props.index]["description"]}
                        label="Beschreibung"
                        type="text"
                      />
                    </div>
                  </div>
                  <div className="row g-2 mb-5">
                    <div className="col">
                      <SelectInput
                        isSubmitting={props.isSubmitting}
                        type="radio"
                        // error={props.errors.titel}
                        // touched={props.touched.titel}
                        placeholder={"Material"}
                        onChange={props.handleChange(
                          `parts[${props.index}].material`
                        )}
                        onBlur={props.handleBlur(
                          `parts[${props.index}].material`
                        )}
                        value={props.values.parts[props.index]["material"]}
                        label="Material"
                        options={[
                          "1.4301 V2A",
                          "1.4310 Federstahl",
                          "1.4404 V4A",
                          "1.4751 V4A",
                          "1.4016 Blech",
                          "DC01 Stahl",
                          "St37 Stahl",
                          "AlMg3",
                          "AlSi",
                          "Al99",
                          "Sonstiges",
                        ]}
                      />
                    </div>
                    {props.values.parts[props.index]["material"] ==
                      "Sonstiges" && (
                      <div className="col">
                        <TextInput
                          isSubmitting={props.isSubmitting}
                          // error={props.errors.parts[props.index]["materialother"]}
                          // touched={props.touched.parts[props.index]["materialother"]}
                          placeholder={"Material (Sonstiges)"}
                          onChange={props.handleChange(
                            `parts[${props.index}].materialother`
                          )}
                          onBlur={props.handleBlur(
                            `parts[${props.index}].materialother`
                          )}
                          value={
                            props.values.parts[props.index]["materialother"]
                          }
                          label="Material Sonstiges"
                          type="text"
                        />
                      </div>
                    )}
                  </div>

                  <div className="row g-2 mb-3">
                    <h3>Oberfläche</h3>
                    <p>Unsere Teile werden standardmäßig entgratet. </p>
                    <div className="col">
                      <SelectInput
                        isSubmitting={props.isSubmitting}
                        type="radio"
                        // error={props.errors.titel}
                        // touched={props.touched.titel}
                        placeholder={"Oberfläche"}
                        onChange={props.handleChange(
                          `parts[${props.index}].finish`
                        )}
                        onBlur={props.handleBlur(
                          `parts[${props.index}].finish`
                        )}
                        value={props.values.parts[props.index]["finish"]}
                        label="Material"
                        options={[
                          "2B matt",
                          "Oszillationsschliff",
                          "Gerader Schliff",
                          "K240 Schliff",
                          "Sonstiges",
                        ]}
                      />
                    </div>
                    {props.values.parts[props.index]["finish"] ==
                      "Sonstiges" && (
                      <div className="col">
                        <TextInput
                          isSubmitting={props.isSubmitting}
                          // error={props.errors.parts[props.index]["finishother"]}
                          // touched={props.touched.parts[props.index]["finishother"]}
                          placeholder={"Oberfläche (Sonstiges)"}
                          onChange={props.handleChange(
                            `parts[${props.index}].finishother`
                          )}
                          onBlur={props.handleBlur(
                            `parts[${props.index}].finishother`
                          )}
                          value={props.values.parts[props.index]["finishother"]}
                          label="Oberfläche Sonstiges"
                          type="text"
                        />
                      </div>
                    )}
                  </div>

                  <div className="row g-2 mb-3">
                    <h3>Gravur</h3>
                    <p>Unsere Teile werden standardmäßig entgratet. </p>
                    <div className="col">
                      <CheckInput
                        isSubmitting={props.isSubmitting}
                        // error={props.errors.diffrentshipping}
                        // touched={props.touched.diffrentshipping}
                        onChange={props.handleChange(
                          `parts[${props.index}].engraving`
                        )}
                        onBlur={props.handleBlur(
                          `parts[${props.index}].engraving`
                        )}
                        value={props.values.parts[props.index]["engraving"]}
                        label=" Dieses Teil soll lasergraviert werden"
                      />
                    </div>
                  </div>
                </div>
                <div className="col">
                  <div className="row g-2 mb-3">
                    <h3>Dateien</h3>
                    <p>
                      Bite fügen Sie alle Dateien in gängigen Formaten (.step,
                      .pdf) hinzu, die wir für die Produktion benötigen. Die
                      Produktionsdateien müssen im Maßststab 1:1 sein.
                    </p>
                    {props.values.parts[props.index]["engraving"] === true && (
                      <p>
                        Zum lasergravieren benötigen wir eine seperate Vektor
                        Datei (.dwg, .dxf) im Maßstab 1:1, welche nur die zu
                        gravierenden Formen enthält. Schriften müssen in Pfade
                        umgewandelt werden!
                      </p>
                    )}
                    <div className="col">
                      <Dropzone
                        files={props.values.parts[props.index]["files"]}
                        setFieldValue={props.setFieldValue}
                        index={props.index}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-primary"
              onClick={props.handleHide}
            >
              Schließen
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}