/*
 * @Author: zhp
 * @Date: 2024-09-12 16:11:31
 * @LastEditTime: 2024-09-13 13:39:40
 * @LastEditors: zhp
 * @Description: 
 */
import { useEffect } from "react";
import useIcon from "../../../hooks/useIcon";
import cls from "./container.module.scss";
import React, { useState } from 'react';
const Container = (props) => {
  let icon = useIcon(props.icon);
  // console.log(props); 
  // const [visible, setVisible] = useState(props.isVisible);
  const desc = props.desc;
 const [localVisible, setLocalVisible] = useState(props.isVisible);

  // 确保局部状态与传入的isVisible同步
  useEffect(() => {
    setLocalVisible(props.isVisible);
  }, [props.isVisible]);

  const handleChangeIsVisible = () => {
    const newVisibility = !localVisible;
    setLocalVisible(newVisibility);
    props.onVisibilityChange(newVisibility);
  };
  return (
    <div
      className={`${cls.container} ${props.className}`}
      style={props.pending ? { filter: "grayscale(100%)" } : props.style}
    >
      <div className={cls.container__head}>
        <h2>{props.title}</h2>
        {desc && <div className={cls.graphBaseDesc}>{desc}</div>}
          <img
          src={icon}
          alt="#"
          onClick={handleChangeIsVisible}
          className={props.icon == "close" ? cls.bigger : ""}
        />
      </div>
      <div className={cls.container__content}>{props.children}</div>
      {props.pending && (
        <div
          className={`${cls.container__content} pending-modal`}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            borderRadius: "20px",
            userSelect: "none",
            cursor: "not-allowed",
          }}
        ></div>
      )}
    </div>
  );
};

export default Container;