import { useEffect, useState } from 'react';
import { Spin, Cascader } from 'antd';
import { fetchJSON } from '@/utils/request';
import { HT_HOST } from '@/config';
import { useTranslation } from 'react-i18next';
import { groupBy } from '@/utils/commons';

// 产品列表
export const fetchAgencyProductsList = async (params) => {
  const map = { title: 'label', id: 'value' };
  const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, params);
  const byTypes = errcode !== 0 ? {} : (groupBy(result.products, (row) => row.info.product_type_name));
  // console.log(byTypes)
  return Object.keys(byTypes).map((type_name) => ({
    label: type_name,
    title: type_name,
    key: type_name,
    value: type_name,
    // disableCheckbox: true,
    level: 1,
    options: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id })),
    children: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id, key: row.info.id, level:2 })),
  }));
};

const ProductsSelector = ({ params, value, ...props }) => {
  const { t } = useTranslation();
  const [fetching, setFetching] = useState(false);
  const [options, setOptions] = useState([]);

  const fetchAction = async () => {
    setOptions([]);
    setFetching(true);
    const data = await fetchAgencyProductsList(params);
    // console.log(data)
    setOptions(data);
    setFetching(false);
    return data;
  };
  useEffect(() => {
    fetchAction();

    return () => {};
  }, []);

  const filter = (inputValue, path) => path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);

  const onCascaderChange = (value, selectedOptions) => {
    // console.log(value, selectedOptions)
    const selectedP = selectedOptions.map(([parent, item]) => item);
    // console.log(selectedP);
    if (typeof props.onChange === 'function') {
      props.onChange(selectedP);
    }
  }


  return (
    <>
      <Cascader
        placeholder={t('products:ProductName')}
        allowClear
        expandTrigger="hover"
        multiple
        showCheckedStrategy={Cascader.SHOW_CHILD}
        maxTagCount={0}
        classNames={{ popup: { root: 'h-96 overflow-y-auto [&_.ant-cascader-menu]:h-full [&_.ant-cascader-checkbox-disabled]:hidden'}}}
        {...props}
        notFoundContent={fetching ? <Spin size='small' /> : null}
        options={options}
        onChange={onCascaderChange}
        showSearch={{ filter }}
      />
    </>
  );
};
export default ProductsSelector;