import axios from "axios";
import React from "react";
import { useState } from "react";
import baseUrl from "../../../array/base/config";
import "../Sharetransferrequests/sharetransferrequest.css";
import Calendar from "@sbmdkl/nepali-datepicker-reactjs";
import "@sbmdkl/nepali-datepicker-reactjs/dist/index.css";

/**
 * A form for capturing shareholder verification document information.
 * @param {object} props - The component's props.
 * @param {function} props.prev - The function to go back to the previous step.
 * @returns {JSX.Element} The rendered component.
 */
const DocumentForm = ({ prev }) => {
  // const [email, setEmail] = useState('');
  const [document_issue_date, setDocumentIssueDate] = useState("");
  const [document_type, setDocumentType] = useState("");
  const [document_number, setDocumentNumber] = useState("");
  const [document_file, setDocument_file] = useState(null);
  const [document_issue_date_bs, setDocument_issue_date_bs] = useState("");
  const [document_expiry_date, setDocument_expiry_date] = useState("");
  const [document_expiry_date_bs, setDocument_expiry_date_bs] = useState("")
  const [document_issue_place, setDocument_issue_place] = useState("");
  const [shareholder, setShareholder] = useState(null);

  const handlePrevious = () => {
    // Go back to the previous step
    prev();
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(
      document_issue_date,
      document_type,
      document_number,
      document_file,
      document_issue_date_bs,
      document_expiry_date_bs,
      document_expiry_date,
      document_issue_place,
    );
    const formData = new FormData();
    formData.append("document_issue_date", document_issue_date);
    formData.append("document_type", document_type);
    formData.append("document_number", document_number);
    formData.append("document_file", document_file);
    formData.append("document_issue_date_bs", document_issue_date_bs);
    formData.append("document_expiry_date", document_expiry_date);
    formData.append("document_expiry_date_bs", document_expiry_date_bs);
    formData.append("document_issue_place", document_issue_place);
    // formData.append("shareholder", 1);


    const detail = localStorage.getItem("token");
    axios
      .post(`${baseUrl}/api/shareholderdocument/`, formData, {
        headers: {
          Authorization: `Token ${detail}`,
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        console.log(response);
        // handle successful response
      })
      .catch((error) => {
        console.error("The document post error is ", error);
        // handle error
      });
  };

  const handleDocumentTypeChange = (e) => {
    const type = e.target.value;
    setDocumentType(type);
  };

  const handleDocumentNumberChange = (e) => {
    const number = e.target.value;
    setDocumentNumber(number);
  };

  const handleFileChange = (e) => {
    const document = e.target.files[0];
    setDocument_file(document);
  };

  const handleIssueDateChangeBS = ({bsDate}) => {
    //this receives a date obj with bsDate and adDate by default
    //direct access by {bsDate}
    setDocument_issue_date_bs(bsDate);
  };
  const handleIssueDateChange = (e) => {
    const date = e.target.value;
    setDocumentIssueDate(date);
  };

  const handleDocumentExpiryChange = ({bsDate, adDate}) => {
    setDocument_expiry_date_bs(bsDate);
    setDocument_expiry_date(adDate)
  };

  const handleIssuePlaceChange = (e) => {
    const place = e.target.value;
    setDocument_issue_place(place);
  };

 

  return (
    <div className="document_form_container">
      <div className="sharetransfer_card">
         <div className="row">
              <div className="col-lg-4">
                  <div className="sharetransfer_form_group">
                      <label>
                        Document Type:
                        <select
                          name="document_type"
                          value={document_type}
                          onChange={handleDocumentTypeChange}
                        >
                          <option value="CITIZENSHIP_CERTIFICATE">
                            Citizenship Certificate
                          </option>
                          <option value="PASSPORT">Passport</option>
                          <option value="DRIVING_LICENSE">Driving License</option>
                          <option value="VOTER_ID">Voter ID</option>
                          <option value="NATIONAL_ID">National ID</option>
                          <option value="OTHER">Other</option>
                        </select>
                      </label>
                  </div>
              </div>
              <div className="col-lg-4">
                  <div className="sharetransfer_form_group">
                      <label>
                        Document Number:
                        <input
                          type="text"
                          name="document_number"
                          value={document_number}
                          onChange={handleDocumentNumberChange}
                          required
                          maxLength={50}
                        />
                      </label>
                  </div>
              </div>
              <div className="col-lg-4">
                  <div className="sharetransfer_form_group">
                      <label>
                        Document Issue Date:
                        <input
                          type="date"
                          name="document_issue_date"
                          value={document_issue_date}
                          onChange={handleIssueDateChange}
                          required
                        />
                      </label>
                  </div>
              </div>
              <div className="col-lg-4">
                  <div className="sharetransfer_form_group">
                    <label htmlFor="issueDate">Issue Date (BS):</label>
                    <Calendar
                      id="issueDateBS"
                      value={document_issue_date_bs}
                      onChange={handleIssueDateChangeBS}
                      dateFormat="YYYY-MM-DD"
                      language="en"
                    />
                  </div>
              </div>
              <div className="col-lg-4">
                 <div className="sharetransfer_form_group">
                      <label htmlFor="expiryDate">Document Expiry Date(B.S.):</label>
                      <Calendar
                        id="expiryDateBS"
                        value={document_expiry_date}
                        onChange={handleDocumentExpiryChange}
                        dateFormat="YYYY-MM-DD"
                        language="en"
                      />
                 </div>
              </div>
              <div className="col-lg-4">
                 <div className="sharetransfer_form_group">
                    <label htmlFor="issuePlace">Issue Place:</label>
                    <input
                      type="text"
                      id="issuePlace"
                      value={document_issue_place}
                      onChange={handleIssuePlaceChange}
                    />
                 </div>
              </div>
              <div className="col-lg-6">
                    <label htmlFor="file">Document File:</label>
                    <div className="sharetransfer_form_group_img">
                      <input type="file" id="file" onChange={handleFileChange} />
                      {document_file && (
                        <img src={URL.createObjectURL(document_file)} alt="Selected file" />
                      )}
                    </div>
              </div>
         </div>
       
       
      

       
        <div className="d-flex justify-end">
          {/* <button onClick={handlePrevious}>Back</button> */}
          <button onClick={handleSubmit} className="sharetransfer_button"> Submit</button>
        </div>
      </div>
    </div>
  );
};

export default DocumentForm;