import React, { useEffect, useState } from 'react'
import LoadingSpinner from '../../Spinners/LoadingSpinner'
import { NewTasks } from './forms'
import { PriceFormatter } from '../../Helpers/PriceFormatter'
import { useSelector } from 'react-redux';
import { InputCom } from '../../AddJob/settings';

export default function AssignMediaTask({
    commonMedia,
    requestStatus,
    assignFamilyTask,
    activeMedia,
    handleActiveMedia,
    closeModal
}) {

  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active

  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE

  let imageSrc = (localStorage.getItem("session_token")
  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE

//   const handleInputChange = (event) => {
//     const { name, value } = event.target;
//     setFormState((prevState) => ({
//       ...prevState,
//       [name]: value,
//     }));
//   };

  return (
    <>
         {commonMedia?.loading ? (
              <div className="h-[30rem] w-full flex justify-center items-center">
                <LoadingSpinner color="sky-blue" size="16" />
              </div>
            ) : (
              <>
                <div
                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
                >
                  <div className="p-4 pt-0">
                      <div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                        {commonMedia?.data?.length ? (
                          commonMedia?.data?.map((item, index) => (
                            <div
                              key={item.uid}
                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
                              onClick={() => handleActiveMedia(item)}
                            >
                              <input
                                type="radio"
                                name="media-list"
                                checked={activeMedia?.uid == item?.uid}
                                onChange={() =>
                                  handleActiveMedia(item)
                                }
                                className="w-[15px] h-[15px] cursor-pointer"
                              />
                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
                                {item?.title}
                              </p>
                            </div>
                          ))
                        ) : (
                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
                            No Media found!
                          </p>
                        )}
                      </div>
                  </div>

                  {/*Right Hand Side for details && Task Type === select */}
                    <>
                      {commonMedia?.data?.length > 0 ? (
                        <div className="p-4 py-0 h-full">
                          <div className="w-full">
                            <div className="mb-3 w-full">
                              <label className="job-label">
                                Description
                              </label>
                              <p className="p-1 text-sm text-slate-900 dark:text-white">
                                {activeMedia?.description}
                              </p>
                            </div>

                            <div className="my-3 w-full flex items-center justify-center">
                                <div className="w-full h-28 rounded-2xl flex items-center justify-center">
                                    <img 
                                      className="w-full h-full object-cover"
                                      loading="lazy"
                                      src={imageSrc} 
                                      alt='job image' 
                                    />
                                </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                {/* Price */}
                                <div className="field w-full">
                                    <label htmlFor="price" className="job-label">Price</label>
                                    <InputCom
                                    fieldClass="px-6 text-right"
                                    // label="Price"
                                    // labelClass="tracking-wide"
                                    inputBg="bg-slate-100"
                                    type="number"
                                    name="price"
                                    placeholder="0"
                                    // value={formState.price}
                                    // inputHandler={handleInputChange}
                                    // blurHandler={props.handleBlur}
                                    // error={props.errors.price && props.touched.price && props.errors.price}
                                    />
                                </div>

                                {/* Currency */}
                                <div className="field w-full">
                                    <label
                                    htmlFor="country"
                                    className="job-label"
                                    >
                                    Currency
                                    {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
                                    </label>
                                    <select
                                    id="country"
                                    name="country"
                                    // value={formState.country}
                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                                    // onChange={handleInputChange}
                                    >
                                    {walletDetails?.loading ? (
                                        <option className="text-slate-500 text-[13.975px]" value="">
                                        Loading...
                                        </option>
                                    ) : walletDetails.data.length ? (
                                        <>
                                        <option className="text-slate-500 text-[13.975px]" value="">
                                            Currency
                                        </option>
                                        {walletDetails.data?.map((item, index) => (
                                            <option
                                            key={index}
                                            className="text-slate-500 text-lg"
                                            value={item?.country}
                                            >
                                            {item?.code}
                                            </option>
                                        ))}
                                        </>
                                    ) : (
                                        <option className="text-slate-500 text-lg" value="">
                                        No Options Found! Try Again
                                        </option>
                                    )}
                                    </select>
                                </div>
                            </div>

                            {/* Duration */}
                            <div className="field w-full">
                                <label
                                htmlFor="timeline_days"
                                className="job-label"
                                >
                                Timeline
                                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
                                </label>
                                <select
                                id="timeline_days"
                                name="timeline_days"
                                // value={formState.timeline_days}
                                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                                // onChange={handleInputChange}
                                >
                                {publicArray.length && (
                                    <>
                                    <option className="text-slate-500 text-[13.975px]" value="">
                                        Duration
                                    </option>
                                    {publicArray.map(({ name, duration }, idx) => (
                                        <option
                                        key={idx}
                                        className="text-slate-500 text-[13.975px]"
                                        value={duration}
                                        >
                                        {name}
                                        </option>
                                    ))}
                                    </>
                                )}
                                </select>
                            </div>
                            
                            {/* Delivery Detail */}
                            <div className="my-3">
                              <label className="w-full job-label">
                                Delivery Detail
                              </label>
                              <textarea
                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                                rows="5"
                                style={{ resize: "none" }}
                                // value={activeMedia?.data?.job_detail}
                                readOnly
                                // onChange={handleInputChange}
                              />
                            </div>
                          </div>
                        </div>
                      ) : (
                        <></>
                      )}
                    </>
                </div>

                {/* BTN */}
                <div className="modal-footer-wrapper">
                  {/* error or success display */}
                  <div className="w-auto h-auto flex items-center">
                    {requestStatus.message != "" &&
                      (!requestStatus.status ? (
                        <div
                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
                        >
                          {requestStatus.message}
                        </div>
                      ) : (
                        requestStatus.status && (
                          <div
                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                          >
                            {requestStatus.message}
                          </div>
                        )
                      ))}
                  </div>

                  {/* End of error or success display */}
                  <div className="w-auto h-auto flex items-center gap-20">
                    <button
                      disabled={requestStatus.loading}
                      onClick={()=>closeModal()}
                      type="button"
                      className="custom-btn border-gradient"
                    >
                      <span className="text-gradient">Close</span>
                    </button>
                    <div className="">
                      {requestStatus.loading ? (
                        <LoadingSpinner color="sky-blue" size="8" />
                      ) : (
                        <button
                          type="button"
                          disabled={requestStatus.loading}
                          onClick={assignFamilyTask}
                          className="custom-btn btn-gradient text-white"
                        >
                          Assign
                        </button>
                      ) 
                      }
                    </div>
                  </div>
                </div>
              </>
            )  
        }     
    </>
  )
}



const publicArray = [
    { duration: 1, name: "1 day" },
    { duration: 2, name: "2 days" },
    { duration: 3, name: "3 days" },
    { duration: 4, name: "4 days" },
    { duration: 5, name: "5 days" },
    { duration: 6, name: "6 days" },
    { duration: 7, name: "1 week" },
    { duration: 14, name: "2 weeks" },
    { duration: 21, name: "3 weeks" },
    { duration: 28, name: "4 weeks" },
  ];