import axios from "axios";
import React, { 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";

const salutationOptions = [
  { label: "Mr.", value: "MR" },
  { label: "Mrs.", value: "MS" },
  { label: "Prof.", value: "PROF" },
  { label: "Dr.", value: "DR" },
];

const maritalStatusOptions = [
  { label: "Single", value: "SINGLE" },
  { label: "Married", value: "MARRIED" },
  { label: "Divorced", value: "DIVORCED" },
  { label: "Widowed", value: "WIDOWED" },
  { label: "Separated", value: "SEPARATED" },
  { label: "Other", value: "OTHER" },
];
/**
 * A component for capturing shareholder information.
 * @param {object} props - The component props.
 * @param {function} props.next - A function to proceed to the next step.
 * @returns {JSX.Element} The rendered component.
 */
const ShareholderForm = ({ next }) => {
  const [salutation, setSalutation] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [selectedDate, setSelectedDate] = useState("");
  const [selectedDateBS, setSelectedDateBs] = useState("");
  const [citizenshipNumber, setCitizenshipNumber] = useState("");
  const [panNumber, setPanNumber] = useState("");
  const [gender, setGender] = useState("NS");
  const [maritalStatus, setMaritalStatus] = useState("");
  const [photo, setPhoto] = useState(null);

  const handleSalutationChange = (e) => {
    setSalutation(e.target.value);
  };

  const handleFirstNameChange = (e) => {
    setFirstName(e.target.value);
  };

  const handleLastNameChange = (e) => {
    setLastName(e.target.value);
  };

  const handleBirthdateChange = (e) => {
    setSelectedDate(e.target.value);
  };

  const handleBirthdateChangeBS = ({ bsDate }) => {
    setSelectedDateBs(bsDate);
  };

  const handleCitizenshipNumberChange = (e) => {
    setCitizenshipNumber(e.target.value);
  };

  const handlePanNumberChange = (e) => {
    setPanNumber(e.target.value);
  };

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  const handleMaritalStatusChange = (e) => {
    setMaritalStatus(e.target.value);
  };

  const handlePhotoChange = (e) => {
    setPhoto(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(
      salutation,
      firstName,
      lastName,
      selectedDate,
      selectedDateBS,
      citizenshipNumber,
      panNumber,
      gender,
      maritalStatus,
      photo
    );
    const formData = new FormData();
    formData.append("salutation", salutation);
    formData.append("first_name", firstName);
    formData.append("last_name", lastName);
    formData.append("birth_date_ad", selectedDate);
    formData.append("birth_date_bs", selectedDateBS);
    formData.append("citizenship_number", citizenshipNumber);
    formData.append("pan_number", panNumber);
    formData.append("gender_type", gender);
    formData.append("marital_status", maritalStatus);
    formData.append("photo", photo);

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

  return (
    <div className="sharetransfer_card">
      <form onSubmit={handleSubmit}>
        <div className="sharetransfer_form_group">
          <label htmlFor="salutation">Salutation:</label>
          <select
            id="salutation"
            value={salutation}
            onChange={handleSalutationChange}
          >
            <option value="">Select a salutation</option>
            {salutationOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="firstName">First Name:</label>
          <input
            type="text"
            id="firstName"
            value={firstName}
            onChange={handleFirstNameChange}
          />
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="lastName">Last Name:</label>
          <input
            type="text"
            id="lastName"
            value={lastName}
            onChange={handleLastNameChange}
          />
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="birthdate">Birth date:</label>
          <input
            type="date"
            id="birthdate"
            name="birthdate"
            value={selectedDate}
            onChange={handleBirthdateChange}
          />
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="birthdate">Birth date(B.S):</label>
          <Calendar
            id="birthdateBS"
            value={selectedDateBS}
            onChange={handleBirthdateChangeBS}
            dateFormat="YYYY-MM-DD"
            language="en"
          />
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="citizenshipNumber">Citizenship Number:</label>
          <input
            type="text"
            id="citizenship"
            onChange={handleCitizenshipNumberChange}
          />
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="panNumber">PAN Number:</label>
          <input
            type="text"
            id="panNumber"
            value={panNumber}
            onChange={handlePanNumberChange}
          />
        </div>
        <div className="sharetransfer_form_group_radio">
          <label htmlFor="gender">Gender:</label>
          <input
            type="radio"
            id="gender-male"
            name="gender"
            value="MALE"
            checked={gender === "male"}
            onChange={handleGenderChange}
          />
          <label htmlFor="gender-male">Male</label>
          <input
            type="radio"
            id="gender-female"
            name="gender"
            value="FEMALE"
            checked={gender === "female"}
            onChange={handleGenderChange}
          />
          <label htmlFor="gender-female">Female</label>
          <input
            type="radio"
            id="gender-other"
            name="gender"
            value="OTHER"
            checked={gender === "other"}
            onChange={handleGenderChange}
          />
          <label htmlFor="gender-other">Other</label>
        </div>
        <div className="sharetransfer_form_group">
          <label htmlFor="maritalStatus">Marital Status:</label>
          <select
            id="maritalStatus"
            value={maritalStatus}
            onChange={handleMaritalStatusChange}
          >
            <option value="">Select a marital status</option>
            {maritalStatusOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
        <label htmlFor="file">Personal Image:</label>
        <div className="sharetransfer_form_group_img">
          <input
            type="file"
            id="photo"
            accept="image/*"
            onChange={handlePhotoChange}
          />
          {photo && (
            <img src={URL.createObjectURL(photo)} alt="Selected file" />
          )}
        </div>
        <div className="sharetransfer_form_group">
          <button type="submit">Next</button>
        </div>
      </form>
    </div>
  );
};

export default ShareholderForm;