import React, { useState } from "react";
import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
//import SideStatistics from "./SideStatistics";
import { localImgLoad } from "../../lib";

export default function RightSideBar({myJobList}) {
  const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
  const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]);
  const dataSetHandler = (value) => {
    if (value === "Last 15 days") {
      setFilterDataSet([10, 30, 20, 40]);
    } else if (value === "Last Month") {
      setFilterDataSet([15, 35, 10, 20]);
    } else {
      setFilterDataSet([8, 15, 40, 30]);
    }
  };

  const [selectedRate, setSelectedRate] = useState("ETH");
  const [rateStaticsDropdown, setRateStaticsDropdown] = useState(false);
  const [filterRateStatics, setFilterRateStatics] = useState([50, 30, 90, 20]);
  const rateDataSetHandler = (value) => {
    setSelectedRate(value);
    if (value === "USD") {
      setFilterRateStatics([50, 30, 90, 20]);
    } else if (value === "BTC") {
      setFilterRateStatics([15, 35, 10, 20]);
    } else {
      setFilterRateStatics([8, 15, 20, 30]);
    }
    setRateStaticsDropdown(!filterRateStatics);
  };

  const { userDetails } = useSelector((state) => state?.userDetails);

  return (
    <>
      <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
          {/* heading */}
          <div className="heading flex justify-between items-center mb-3.5">
            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
              Quick Links
            </h3>
            <div></div>
          </div>

          <div className="platform-list">
            {userDetails && userDetails?.account_type !== "FAMILY" && (
              <>
                <div className="item flex space-x-3 items-center mb-4">
                  {/* image */}
                  <div className="w-8 h-8 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      id="history"
                    >
                      <g data-name="14">
                        <circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
                        <path
                          fill="#ef6c00"
                          d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"
                        ></path>
                        <path
                          fill="#ff8f00"
                          d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  {/* name */}
                  <div>
                    <p className="text-thin-light-gray text-base font-medium">
                      <NavLink to="/history">History</NavLink>
                    </p>
                  </div>
                  {/* action */}
                </div>

                <div className="item flex space-x-3 items-center mb-4">
                  {/* image */}
                  <div className="w-8 h-8 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      id="add-user"
                    >
                      <path
                        fill="#9bcb5b"
                        d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"
                      ></path>
                      <path
                        fill="#9bcb5b"
                        d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"
                      ></path>
                      <path
                        fill="#0376bc"
                        d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"
                      ></path>
                      <circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle>
                      <path
                        fill="#9bcb5b"
                        d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"
                      ></path>
                    </svg>
                  </div>
                  {/* name */}
                  <div>
                    <p className="text-thin-light-gray text-base font-medium">
                      <NavLink to="/referral">Refer a Friend</NavLink>
                    </p>
                  </div>
                </div>
              </>
            )}

            <div className="item flex space-x-3 items-center mb-4">
              {/* image */}
              <div className="w-8 h-8 rounded-full">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 48 48"
                  id="InternationalUser"
                >
                  <path
                    fill="#e6e7f9"
                    d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
                    className="colorc1e5ff svgShape"
                  ></path>
                  <path
                    fill="#ff6699"
                    d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
                    className="colorff99b0 svgShape"
                  ></path>
                  <path
                    fill="#998da0"
                    d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
                    className="colorffd499 svgShape"
                  ></path>
                  <path
                    fill="#e6e7f9"
                    d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
                    className="colorc1e5ff svgShape"
                  ></path>
                </svg>
              </div>
              {/* name */}
              <div>
                <p className="text-thin-light-gray text-base font-medium">
                  <NavLink to="/resources">Resources</NavLink>
                </p>
              </div>
            </div>
          </div>
        </div>

        {/*JOB LINKS*/}
        {myJobList?.data?.result_list?.length > 0 &&
        <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
          {/* heading */}
          <div className="px-8 heading flex justify-between items-center mb-3.5">
            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
              Job Links
            </h3>
            <div></div>
          </div>

          <div className="platform-list">
              <div className="px-8 item flex space-x-3 items-center mb-4">
                {/* image */}
                <div className="w-8 h-8 p-[4px] rounded-full">
                  <img src={localImgLoad('images/icons/job_active.svg')} className="w-full h-full" alt='Active Task' />
                </div>
                {/* name */}
                <div>
                  <p className="text-thin-light-gray text-base font-medium">
                    <NavLink to="/my-active-jobs">Active Task</NavLink>
                  </p>
                </div>
                {/* action */}
              </div>

              <div className="px-8 item flex space-x-3 items-center mb-4">
                {/* image */}
                <div className="w-8 h-8 p-[4px] rounded-full">
                  <img src={localImgLoad('images/icons/job_pending.svg')} className="w-full h-full" alt='Review Task' />
                </div>
                {/* name */}
                <div>
                  <p className="text-thin-light-gray text-base font-medium">
                    <NavLink to="/my-review-jobs">Review Pending</NavLink>
                  </p>
                </div>
              </div>

              <div className="px-8 item flex space-x-3 items-center mb-4">
                {/* image */}
                <div className="w-8 h-8 p-[4px] rounded-full">
                  <img src={localImgLoad('images/icons/job_past_due.svg')} className="w-full h-full" alt='Past Due Task' />
                </div>
                {/* name */}
                <div>
                  <p className="text-thin-light-gray text-base font-medium">
                    <NavLink to="/my-pastdue-jobs">Past Due</NavLink>
                  </p>
                </div>
              </div>

              {/* Line */}
              <div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>

              <div className="px-8 item flex space-x-3 items-center mb-4">
                {/* image */}
                <div className="w-8 h-8 p-[4px] rounded-full">
                  <img src={localImgLoad('images/icons/job_group.svg')} className="w-full h-full" alt='Job Groups' />
                </div>
                {/* name */}
                <div>
                  <p className="text-thin-light-gray text-base font-medium">
                    <NavLink to="/job-groups">Job Groups</NavLink>
                  </p>
                </div>
              </div>
          </div>
        </div>
        }
      </div>
    </>
  );
}
