import React, { useEffect, useState } from "react";
import axios from "axios";
import "../Shareholder/shareholder.css";
import baseUrl from "../../../array/base/config";
import ShareholderEditForm from "./ShareholderEditForm";
import { useRef } from "react";
import { toast } from "react-toastify";
import TabGroup from "./TabGroup";

/**
 * Represents the Shareholder page component
 * @module Shareholder
 * @param userroles - The user roles
 * @return {JSX.Element}
 */
const Shareholder = ({ userroles }) => {
  /**
   * React state that holds the user data
   * @memberof module:Shareholder
   * @tyep {object}
   * @default {}
   * @name user
   */
  const [user, setUser] = useState({});
  /**
   * React state that holds the edit state
   * @memberof module:Shareholder
   * @tyep {boolean}
   * @default false
   * @name edit
   */
  const [edit, setEdit] = useState(false);
  /**
   * React state that holds the loading state
   * @memberof module:Shareholder
   * @tyep {boolean}
   * @default true
   * @name isLoading
   *
   */
  const [isLoading, setIsLoading] = useState(true);
  /**
   * React state that holds the file input
   * @memberof module:Shareholder
   * @tyep {object}
   * @default null
   * @name fileInput
   *
   */
  const [fileInput, setFileInput] = useState(null);
  /**
   * React useRef that holds the file input
   * @memberof module:Shareholder
   * @default null
   *
   * @type {React.MutableRefObject<null>}
   */
  const fileInputRef = useRef(null);
  const [refresh, setRefresh] = useState(true);

  // console.log("The user roles in shareholder", userroles);

  useEffect(() => {
    apicall();
  }, []);

  /**
   * Function that handles the image change
   * @memberof module:Shareholder
   * @name handleImageChange
   * @function handleImageChange
   * @param e {Event} Html event
   * @return {void}
   */
  const handleImageChange = (e) => {
    const selectedFile = e.target.files[0];
    setFileInput(selectedFile);
  };
  /**
   * Function that handles the submit
   * @memberof module:Shareholder
   * @name handleSubmit
   * @function handleSubmit
   * @async
   * @return {Promise<void>}
   */
  const handleSubmit = async () => {
    try {
      const detail = localStorage.getItem("token");
      const response = await axios({
        method: "patch",
        url: `${baseUrl}/api/shareholder/${user.id}/`,
        headers: {
          Authorization: `Token ${detail}`,
          "Content-Type": "multipart/form-data",
        },
        data: {
          photo: fileInput,
        },
      });
      console.log("Patch data success", response);
      setFileInput((prev) => !prev);
      toast.success("Your profile picture has been updated successfully!", {
        position: "top-right",
        autoClose: 5001,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
      });
      apicall();
    } catch (err) {
      console.log("the patch error is ", err);
      toast.error(
        "Your profile picture could not be updated. Please try again.",
        {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        }
      );
    }
  };
  /**
   * Function that handles the api call for getting shareholder data
   * @memberof module:Shareholder
   * @name apicall
   * @function apicall
   * @async
   * @return {Promise<void>}
   *
   */
  const apicall = () => {
    const detail = localStorage.getItem("token");
    axios({
      method: "get",
      url: `${baseUrl}/api/shareholder/`,
      headers: {
        Authorization: `Token ${detail}`,
      },
    })
      .then((res) => {
        console.log("Received user data", res);
        setUser(res.data.data.results[0]);
        setIsLoading(false);
      })
      .catch((err) => console.log(err));
  };
  return (
    <div className="shareholder_container">
      <div className="shareholder_heading">
        <div className="shareholder_heading_row1"></div>
        <div className="shareholder_heading_row3">
          <img src={user?.photo} alt="" />
          {fileInput && <button onClick={handleSubmit}>upload</button>}
          <input
            type="file"
            accept="image/*"
            onChange={handleImageChange}
            ref={fileInputRef}
          />
          <div className="shareholder_text_div">
            <h3>
              <span>{user?.salutation}.</span>{" "}
              {user?.first_name + " " + user?.last_name}
            </h3>
            {!isLoading && (
              <p>
                {user?.shareholder_address[0]?.municipality?.name &&
                  ` ${user?.shareholder_address[0]?.municipality?.name},`}
                {user?.shareholder_address[0]?.district?.name &&
                  ` ${user?.shareholder_address[0]?.district?.name},`}
                {user?.shareholder_address[0]?.province?.name &&
                  ` ${user?.shareholder_address[0]?.province?.name}`}
              </p>
            )}
          </div>
        </div>
      </div>

      {user && (
        <TabGroup
          user={user}
          userroles={userroles}
          setEdit={setEdit}
          apicall={apicall}
          edit={edit}
        />
      )}
    </div>
  );
};

export default Shareholder;