import { Link } from "react-router-dom";
import henceforthApi from "../utils/henceforthApi";
import { GlobalContext } from "../context/Provider";
import React, { useState, useContext, useEffect } from "react";
import axios from "axios";
import { useParams, useNavigate } from "react-router-dom";
import Profile from "../assets/images/profile_placeholder.png";
import Swal from "sweetalert2";
import { Spinner } from "../components/BootstrapCompo";
import { toast } from "react-toastify";
import MaskImage from "../components/common/MaskImage";
import { UserNameValidation } from "../utils/validations";

interface staff {
  name: string,
  email: string,
  password: string,
  image: string
}

const EditStaff = () => {
  const params: any = useParams();
  const navigate = useNavigate();

  const { authState, staffMembers } = useContext(GlobalContext);
  if(authState.access_token){henceforthApi.setToken(authState.access_token);}
  const { id } = useParams();
  const [loader, setLoader] = useState(false);
  const [memberDetail, setMemberDetail] = useState<staff>({
    name: '',
    email: '',
    password: '',
    image: ''
  });
  const [state, setState] = useState<any>({
    selected: new Map(),
    mim: 'fvvgjy'
  });
  const editStaff = async () => {
    const apiRes = await henceforthApi.Administrator.getStaffMemberDetail(
      params.id
    );
    console.log("apiresobnse", apiRes);
    let data = apiRes.data;
    setMemberDetail(data);
    if (Array.isArray(data.roles)) {
      let newMap = new Map();
      data.roles.map((res: any) => {
        newMap.set(res, res);
      });
      console.log("new map", newMap)
      setState({
        ...state,
        selected: newMap,
      });
    }
  }
  useEffect(() => {
    editStaff()
  }, []);

  const handleFile = async (file: any) => {
    debugger
    setLoader(true);
    if (!(file?.type.startsWith('image'))) {
      return toast.error('You can upload image in jpeg, png format');
    }
    const apiRes = await henceforthApi.Auth.uploadImage("file", file)
    setLoader(false);
    setMemberDetail({
      ...memberDetail,
      image: apiRes.data.file_name,
    });
    console.log(apiRes, "upload image");
  };

  const handleChange = (e: any) => {
    let name = e.target.name;
    let value = e.target.value;

    setMemberDetail({
      ...memberDetail,
      [name]: value,
    });
  };
  const handleCancel = () => {
    window.history.back();
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    let name = memberDetail.name.trim()
    let email = memberDetail.email.trim()
    let rowData = [] as Array<string>

    state.selected.forEach((element: any) => {
      rowData.push(element);
    });

    console.log("memberDetail", memberDetail)
    if (!rowData.length) {
      return toast.warn("Please select min 1 role");
    }
    if (!name) {
      return toast.warn("Please add valid name");
    }
    if (!email) {
      return toast.warn("Please add valid email");
    }
    if (!UserNameValidation(name)) {
      return toast.warn("Please enter alphabets only");
    }
    if (!memberDetail.image) {
      return toast.warn("Please add Image");
    }
    console.log(setMemberDetail, "me");
    let items = {
      _id: id,
      name: name,
      email: email,
      language: "ENGLISH",
    } as any;
    if (memberDetail.image) {
      items["image"] = memberDetail.image;
    }
    henceforthApi.Administrator.addStaffMembers({ ...items, roles: rowData })
      .then((res: any) => {
        console.log(res);
        Swal.fire({
          title: "Profile updated",
          text: "Profile updated successfully",
          icon: "success",
          confirmButtonText: "OK",
        });
        window.history.back();
      })
      .catch((err: any) => {
        console.log(err.response.body);
        Swal.fire({
          title: "Error!",
          text: err.response.body.error_description,
          icon: "error",
          confirmButtonText: "Cancel",
        });
      });
  };

  const addRoleList = (role: string, checked: string) => {
    const { selected } = state;
    if (checked) {
      selected.set(role, role);
    } else {
      selected.delete(role);
    }
    setState({
      ...state,
      selected,
    });
  };

  return (
    <div className="row animated fadeInRight">
      <div className="col-md-12">
        <div className="ibox">
          <div className="ibox-title p-3 d-flex space-between">
            <div className="d-flex justify-content-between align-items-center">
              <div>
                <h4>Edit Staff</h4>
              </div>
            </div>
          </div>
          <div className="ibox-content spinerr-wrapper">
            <div className="text-center my-4 position-relative">
              {loader ? (
                <Spinner />
              ) : (
                <div className="position-relative d-inline-block upload-image">
                  <img
                    className="profile-user position-relative"
                    alt=""
                    src={
                      memberDetail?.image
                        ? `${henceforthApi.API_FILE_ROOT_ORIGINAL}${memberDetail?.image}`
                        : Profile
                    }
                  />

                  <label className="label edit-label" htmlFor="upload-profile">
                    <i className="fa fa-camera"></i>
                  </label>
                  <input
                    onChange={(e: any) => handleFile(e.target.files[0])}
                    type="file"
                    accept="image/png,image/jpeg"
                    id="upload-profile"
                    className="form-control d-none"
                  />
                  <MaskImage image={memberDetail?.image} key={memberDetail?.image} />
                </div>
              )}
              {/**************** mask-image ****************/}
            </div>
            <form onSubmit={handleSubmit}>
              <div className="form-row row">
                <div className="form-group col-md-6">
                  <label>Name</label>
                  <input
                    type="text"
                    className="form-control"
                    pattern="^[^-\s][a-zA-Z0-9_\s-]+$"
                    title="Please enter a valid name"
                    required
                    placeholder="Name"
                    maxLength={30}
                    name="name"
                    onChange={handleChange}
                    value={memberDetail.name}
                  />
                </div>
                <div className="form-group col-md-6">
                  <label>Email</label>
                  <input
                    type="email"
                    required
                    className="form-control"
                    placeholder="Enter Email"
                    name="email"
                    onChange={handleChange}
                    value={memberDetail.email}
                  />
                </div>
                <div className="row">
                  {staffMembers.map((res: any) => {
                    return (
                      <span className="col-md-2">
                        <input
                          type={`checkbox`}
                          className=" me-1"
                          value="fw"
                          checked={state.selected.has(res)}
                          onChange={(e: any) => addRoleList(res, e.target.checked)}
                        />
                        {res}{" "}
                      </span>
                    );
                  })}
                </div>
              </div>
              <div className="form-group row mt-3">
                <div className="col-sm-4 col-sm-offset-2">
                  <button
                    onClick={handleCancel}
                    className="btn btn-white btn-sm"
                    type="button"
                  >
                    Cancel
                  </button>
                  <button
                    className="btn btn-primary-button btn-sm ms-2"
                    type="submit"
                  >
                    Save Changes
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditStaff;