import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";

const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
  return (
    <div className="my-10  w-11/12 mx-auto">
      {/* breadCrumb */}

      <div className="flex flex-row items-center">
        {breadCrumbs.map((breadCrumb, index) => (
          <div className="flex flex-row items-center">
            <span
              className={`cursor-pointer text-xs hover:text-blue-900  ${
                breadCrumb.active ? "text-blue-900" : "text-blue-400"
              }`}
            >
              {breadCrumb.name}
            </span>
            {Number(index) !== breadCrumbs.length - 1 && (
              <div
                className={`mx-2 ${
                  breadCrumb.active ? "text-blue-900" : "text-blue-400"
                }`}
              >
                {" > "}
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="my-7">
        {/* page Title */}
        <div className="flex flex-row items-center">
          <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
          <h2 className="text-base text-blue-900">{title}</h2>
        </div>
        {/* page Title */}
        <div className="flex flex-row items-center mt-4">
          <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
          <h2 className="text-sm">{subTitle}</h2>
        </div>
      </div>
      <Tabbar />
      <BasicTable />
    </div>
  );
};
window.isDown = false;
export default ReactTable3;
function Tabbar({}) {
  const ref = useRef(null);

  // const { onMouseDown } = useDraggableScroll(ref);
  const tabs = [
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
    "تست۱",
  ];
  return (
    <ul
      className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
      onMouseDown={(e) => {
        const slider = window.document.querySelector(".tabbar");
        window.isDown = true;
        window.startX = e.pageX - slider.offsetLeft;
        window.scrollLeft = slider.scrollLeft;
      }}
      onMouseLeave={(e) => {
        window.isDown = false;
      }}
      onMouseUp={(e) => {
        window.isDown = false;
      }}
      onMouseMove={(e) => {
        const slider = window.document.querySelector(".tabbar");
        if (!window.isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - window.startX) * 1;
        slider.scrollLeft = window.scrollLeft - walk;
      }}
    >
      {tabs.map((el) => (
        <li className="mr-2 ">
          <span
            onClick={(e) => {
              if (window.isDown) return e.preventDefault();
              ///do here
            }}
            aria-current="page"
            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
          >
            <span className="p-2">
              {el} <span className="p-2">x</span>
            </span>
          </span>
        </li>
      ))}
    </ul>
  );
}

ReactTable3.defaultProps = {
  breadCrumbs: [
    {
      name: "صفحه اصلی",
      active: false,
    },
    {
      name: "آمار و گزارشات",
      active: false,
    },
    {
      name: "فروش محصولات",
      active: false,
    },
    {
      name: "سال 1400",
      active: true,
    },
  ],

  title: "میزان فروش محصولات",
  subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};