import React from 'react';
import { Dropdown } from "antd";
import { useAntVConfig, useProducts } from "../../../../../hooks/useProducts";
import { useLocale, FormattedMessage } from "dumi";
import styles from "./index.module.less";
export function ChooseLib(props) {
  var _data$find;
  var value = props.value,
    onChange = props.onChange,
    _props$size = props.size,
    size = _props$size === void 0 ? "default" : _props$size;
  var isCompact = size === 'compact';
  var locale = useLocale();
  var lang = locale.id === 'zh' ? 'zh' : 'en';
  var _useProducts = useProducts(),
    _useProducts$data = _useProducts.data,
    data = _useProducts$data === void 0 ? [] : _useProducts$data;
  var _useAntVConfig = useAntVConfig(),
    _useAntVConfig$data = _useAntVConfig.data,
    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
      library: []
    } : _useAntVConfig$data,
    _useAntVConfig$data2$ = _useAntVConfig$data2.library,
    library = _useAntVConfig$data2$ === void 0 ? [] : _useAntVConfig$data2$;
  var onSelect = function onSelect(key) {
    onChange === null || onChange === void 0 || onChange(key);
  };
  var items = data.filter(function (item) {
    return item.lang === lang && library.map(function (l) {
      return l.toUpperCase();
    }).includes(item.title);
  }).map(function (item) {
    return {
      key: item.title,
      label: item.title,
      icon: /*#__PURE__*/React.createElement("img", {
        src: item.icon,
        alt: item.title,
        className: styles.icon
      }),
      extra: !isCompact && item.slogan,
      onClick: function onClick() {
        return onSelect(item.title);
      }
    };
  });
  return /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: items
    }
  }, /*#__PURE__*/React.createElement("button", {
    type: "button"
  }, /*#__PURE__*/React.createElement("img", {
    className: styles.icon,
    src: ((_data$find = data.find(function (item) {
      return item.title === value;
    })) === null || _data$find === void 0 ? void 0 : _data$find.icon) || "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original",
    alt: "AntV"
  }), value || !isCompact && /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "ai.chooseLib.placeholder"
  })));
}