import React, { useEffect } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { TreeSelect } from "antd";
// import { fetchClassifieds } from "lib/redux/actions/classifieds-actions";
import {
  ApiGet,
  fetchClassifieds,
  fetchDistricts,
} from "apiCalls/apiEndpoints";
import AdMeta from "components/ad-meta";
import { useQuery } from "react-query";

interface CSI {
  name?;
  classifieds?;
  fetchClassifieds?;
  status?;
  defaultValue?;
  onChangeProp?: (v) => any;
}

const ClassifiedSelectorComponent = ({
    name,
    // classifieds,
    // fetchClassifieds,
    status,
    defaultValue,
    onChangeProp,
  }: CSI) => {
    const { data: classifiedsData, isLoading: isFetchingClassifieds } =
      useQuery(["classifiedsss"], fetchClassifieds, {
        refetchOnWindowFocus: false,
      });
    let classifieds = classifiedsData?.data?.data;

    const [value, setValue] = React.useState(defaultValue),
      [currentClassified, setCurrentClassified] = React.useState({}),
      onChange = (value) => {
        setValue(value);
        if (value?.toString().split("-")[1]) {
          setCurrentClassified(
            classifieds
              ?.find((cl) => cl?.id == value.toString().split("-")[0])
              ?.subclassifieds?.find(
                (cl) => cl?.id == value.toString().split("-")[1]
              )
          );
        } else {
          setCurrentClassified(
            classifieds?.find((cl) => cl?.id == value?.toString().split("-")[0])
          );
        }
        if (onChangeProp) onChangeProp(value);
      };

      useEffect(() => {
        console.log(currentClassified)
      
        
      }, [currentClassified])
      

    // React.useEffect(() => {
    //   fetchClassifieds(null, {
    //     queryParams: {
    //       include: "subclassifieds.".repeat(8).slice(0, -1),
    //     },
    //   });
    // }, []);

    // const { data: classifiedsData, isLoading: isFetchingClassifieds } =
    //   useQuery(["classifieds"], fetchClassifieds);
    //  classifieds = classifiedsData?.data?.data;

    const MakeTrees = ({ selectedClassified }: { selectedClassified }) => {
        return selectedClassified?.subclassifieds?.length ? (
          <TreeSelect.TreeNode
            key={selectedClassified.id}
            value={selectedClassified.id}
            title={selectedClassified.name}
          >
            {selectedClassified?.subclassifieds?.map((sb) =>
              sb?.subclassifieds?.length ? (
                <MakeTrees selectedClassified={sb} />
              ) : (
                <TreeSelect.TreeNode
                  key={sb.id}
                  value={sb.id}
                  title={sb.name}
                />
              )
            )}
          </TreeSelect.TreeNode>
        ) : (
          <TreeSelect.TreeNode
            key={selectedClassified.id}
            value={selectedClassified.id}
            title={selectedClassified.name}
          />
        );
      },
      makeTreeData = (classifieds) => {
       

        return classifieds?.map((classified) =>
          classified.subclassifieds
            ? {
                title: classified.name,
                value: classified.id,
                children: makeTreeData(classified.subclassifieds),
              }
            : {
                title: classified.name,
                value: classified.id,
              }
        );
      };

    return (
      <>
        {isFetchingClassifieds && "loading, please wait..."}
        <TreeSelect
          defaultValue={defaultValue}
          disabled={isFetchingClassifieds}
          treeData={makeTreeData(classifieds?.filter((c) => !c.classified_id))}
          showSearch
          style={{ width: "100%" }}
          value={value}
          dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
          placeholder="Select a classified"
          allowClear
          treeDefaultExpandAll
          onChange={onChange}
        />
        <input type="hidden" name={name ?? "classified"} value={value} />

        {/* <AdMeta classified={currentClassified} /> */}
      </>
    );
  },
  mapStateToProps = (state) => state,
  mapDispatchToProps = (dispatch) =>
    bindActionCreators(
      {
        fetchClassifieds,
      },
      dispatch
    ),
  ClassifiedSelector = connect(
    mapStateToProps,
    mapDispatchToProps
  )(ClassifiedSelectorComponent);

export default ClassifiedSelector;