import { useState, useEffect } from "react";
import { Tab } from "@headlessui/react";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function VTab(props) {
  let [categories, setCategories] = useState([]);
  let [children, setChildren] = useState([]);
  let [selectedOne, setSelectedOne] = useState(0);
  useEffect(() => {
    if (props.ops.length > 0) {
      setCategories(props.ops);
      setSelectedOne(0)
    }
  }, [props.ops]);
  const getSelectedIndex = () => {
    return selectedOne;
  };
  useEffect(() => {
    setChildren(props.children);
  }, [props.children]);
  useEffect(() => {
    // if(props.selectedtypecode!=="1001")
    // {
    //   setCategories(props.ops.filter(x=>x.code==="-2"));
    // }
    // else{
    //   setCategories(props.ops);
    // }
    setSelectedOne(0)
  }, [props.selectedtypecode]);

  return (
    <div className={classNames("w-full  sm:px-0", props.className)}>
      <Tab.Group 
        onChange={(idx) => {
          props.tabchanged(categories[idx]);
        }}
      >
        <Tab.List className="flex space-x-5    z-10  " >
          {categories
            .sort((a, b) => (a.sort > b.sort ? 1 : -1))
            .map((category,idx) => (
              <Tab
                key={idx}
                className={({ selected }) =>
                  classNames(
                    " flex-none mx-3  p-4 py-2.5 text-sm font-medium leading-5 text-[#0185FF]",
                    " focus:outline-none focus:ring-none",
                    selected
                      ? "bg-white  border-b-2  border-[#0185FF]"
                      : "  hover:text-[#0185FF]/[0.6]"
                  )
                }
              >
                {/* {category.sort} */}
                {category.name}
              </Tab>
            ))}
        </Tab.List>
        <Tab.Panels className="-mt-0.5 h-full overflow-y-auto   border-t-2 ">
          {categories
            .sort((a, b) => (a.sort > b.sort ? 1 : -1))
            .map((x) => (
              <Tab.Panel className={classNames("bg-white p-3")}>
                {children}
              </Tab.Panel>
            ))}
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}