import ReactSelect, { components } from "react-select";
import React, { useState } from "react";
import { faEye, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    backgroundColor: "teal",
    color: "white",
  }),
  placeholder: (provided: any) => ({
    ...provided,
    color: "white",
  }),
  dropdownIndicator: (provided: any) => ({
    ...provided,
    color: "white",
  }),
  option: (provided: any, state: any) => ({
    ...provided,
    borderBottom: "1px dotted pink",
    color: state.isSelected ? "white" : "black",
    backgroundColor: state.isSelected ? "teal" : "white",
    cursor: "pointer",
    whiteSpace: "nowrap",
    "&:hover": {
      backgroundColor: "lightblue",
      color: "black",
    },
  }),
  menu: (provided: any) => ({
    ...provided,
    minWidth: "160px",
    width: "max-content",
  }),
};
const IconOption = (props: any) => (
  <components.Option {...props}>
    <span style={{ display: "flex", alignItems: "center", gap: "8px", whiteSpace: "nowrap" }}>
      <FontAwesomeIcon icon={props.data.icon} style={{ width: "14px", flexShrink: 0 }} />
      {props.label}
    </span>
  </components.Option>
);
function SelectAction(props: {
  handleChange: any;
  index?: number;
  options?: any[];
}) {
  // const [selectedOption, setSelectedOption] = useState(null);
  // const selectedOption=""
  const handleOptionChange = (selectedOption: string) => {
    props.handleChange(selectedOption, props.index);
  };

  const [selectedOption, setSelectedOption] = useState(null);
  return (
    <>
      <div>
        <ReactSelect
          components={{ Option: IconOption }}
          styles={customStyles}
          options={props.options}
          value={selectedOption}
          placeholder="Action"
          onChange={(e) => {
            handleOptionChange(e?.value);
          }}
        />
      </div>
    </>
  );
}

export default SelectAction;