import "core-js/modules/es.array.includes";
import React, { useState } from "react";
import { Option } from "../Select";
import componentCategories from "../../../docs-utils/componentCategories";
import componentGroups from "../../../docs-utils/componentGroups";
import SelectWithSearch from "../SelectWithSearch/SelectWithSearch";
import { func } from "prop-types";
import style from "./Select.model.decorator.module.css";
import TextBox from "../../textbox/TextBox.skeleton";

function CustomSearch() {
  return /*#__PURE__*/React.createElement(TextBox, {
    endIcon: "x"
  });
}

export default function Select__search() {
  let baseData = ["1", "2", "3", "4", "5", "6"];
  let [list, onList] = useState(baseData);

  function onSearchChange(value) {
    if (value == "") {
      onList(baseData);
    } else {
      onList(["1", "11", "111", "1111", "1111", "111", "1111", "1111", "1111", "11111"]);
    }
  }

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      margin: "50px",
      width: "300px",
      border: "1px solid rgb(62 105 175)",
      height: "300px",
      padding: "30px"
    }
  }, /*#__PURE__*/React.createElement("h4", {
    style: {
      margin: "30px 0"
    }
  }, "Select With Search"), /*#__PURE__*/React.createElement(SelectWithSearch, {
    onSearch: (obj, search) => {
      return obj.props.value.includes(search);
    },
    onSearchChange: onSearchChange,
    selectedValue: "1",
    emptyState: () => {
      return /*#__PURE__*/React.createElement("img", {
        style: {
          width: "200px",
          height: "150px",
          display: "block",
          margin: "auto"
        },
        src: "https://i.pinimg.com/originals/06/6e/56/066e56cdf8e10f34e2a03ac933238735.jpg"
      });
    }
  }, list.map((val, i) => {
    return /*#__PURE__*/React.createElement(Option, {
      key: i,
      value: val
    }, val);
  }))));
}
export function SelectWithSearchExample() {
  let baseData = ["1", "2", "3", "4", "5", "6"];
  let [list, onList] = useState(baseData);

  function onSearchChange(value) {
    if (value == "") {
      onList(baseData);
    } else {
      onList(["1", "11", "111", "1111", "1111", "111", "1111", "1111", "1111", "11111", "1111", "11111", "11111", "11111111", "11111", "1111111", "11111111", "11111", "11111111", "11111", "111111", "1111", "1111", "1111", "11111", "11111111"]);
    }
  }

  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: "300px",
      height: "300px"
    }
  }, /*#__PURE__*/React.createElement(SelectWithSearch, {
    onSearch: (obj, search) => {
      return obj.props.value.includes(search);
    },
    onSearchChange: onSearchChange,
    selectedValue: "1",
    searchPlaceholder: "Search number : ex:11,111 etc",
    customStyle: {
      base: style.myColor
    },
    emptyState: () => {
      return /*#__PURE__*/React.createElement("img", {
        style: {
          width: "200px",
          height: "150px",
          display: "block",
          margin: "auto"
        },
        src: "https://i.pinimg.com/originals/06/6e/56/066e56cdf8e10f34e2a03ac933238735.jpg"
      });
    }
  }, list.map((val, i) => {
    return /*#__PURE__*/React.createElement(Option, {
      key: i,
      value: val
    }, val);
  })));
}

if (false) {
  Select__search.docs = {
    componentGroup: componentGroups.Components,
    folderName: componentCategories.UCL
  };
}