import { Menu } from "@nutui/nutui-react-taro";
import { useState } from "react";
import { Image } from "@tarojs/components";
import img from "../../config/images";
import { MenuFilterProps } from "../../../types/list/types";
import styles from "./index.module.scss";

const MenuComponent = (props: MenuFilterProps) => {
  const { options, value, onChange, wrapperClassName, itemClassName, name, onOpen, onClose,open } =
    props;
  const [isChange, setIsChange] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const handleChange = (val: Record<string, string>) => {
    setIsChange(true);
    onChange && onChange(name, val.value);
  };

  const handleOpen = () => {
    setIsOpen(true);
    onOpen && typeof onOpen === "function" && onOpen();
  };

  const handleClose = () => {
    setIsOpen(false);
    onClose && typeof onClose === "function" && onClose();
  };

  return (
    <Menu
      className={`${styles.menuWrap} ${wrapperClassName} ${
        isChange ? styles.active : ""
      }`}
      activeColor="#000"
      onOpen={handleOpen}
      onClose={handleClose}
      icon={
        <Image
          className={`${styles.menuIcon} ${isOpen ? styles.rotate : ""}`}
          src={isChange ? img.ICON_ARROW_DOWN_WHITE : img.ICON_ARROW_DOWN}
        />
      }
    >
      <Menu.Item
        className={`${styles.menuItem} ${itemClassName}`}
        options={options}
        defaultValue={value}
        onChange={handleChange}
        icon={
          <Image
            className={styles.itemIcon}
            src={img.ICON_MENU_ITEM_SELECTED}
          />
        }
      />
    </Menu>
  );
};

export default MenuComponent;