import * as React from "react"
import MultiSelect from "react-multi-select-component"
import * as styles from "./index.module.scss"
import Icon from "@/components/icon"
import RenderItem from "@/components/search-partner/all-partner/multi-select/render-item"

const SelectArrow = ({ expanded }: { expanded: boolean }) => (
  <div className={styles.arrow}>
    {expanded ? (
      <div className={styles.expandedArrow}>
        <Icon name={"chevron-right"} />
      </div>
    ) : (
      <Icon name={"chevron-right"} />
    )}
  </div>
)

interface IProps {
  options: Option[]
  value: Option[]
  onChange: React.Dispatch<React.SetStateAction<Option[]>>
}

const MultiSelectComponent: React.FC<IProps> = ({
  options,
  value,
  onChange,
}) => (
  <div className={styles.multiSelect}>
    <MultiSelect
      overrideStrings={{
        allItemsAreSelected: "全部",
        noOptions: "暂无",
        selectAll: "全部",
        selectSomeItems: "请选择（可多选）",
      }}
      disableSearch
      options={options}
      value={value}
      onChange={onChange}
      labelledBy="Select"
      ArrowRenderer={expanded => SelectArrow(expanded)}
      ItemRenderer={RenderItem}
    />
  </div>
)

export default MultiSelectComponent