/* eslint-disable */
import React, { useEffect, useRef, useState } from "react";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import styles from "@/routes/indexPage.less";

const skinList = [
  {
    name: "default",
    color1: "#383d41",
    color2: "#303538"
  },
  {
    name: "color1",
    color1: "#6e5064",
    color2: "#b482a4"
  },
  {
    name: "color2",
    color1: "#0010fc",
    color2: "#515bf3"
  },
  {
    name: "color3",
    color1: "#433598",
    color2: "#7160d5"
  },
  {
    name: "color4",
    color1: "#e1408e",
    color2: "#c56f98"
  },
  {
    name: "color5",
    color1: "#f46b5f",
    color2: "#e69892"
  },
  {
    name: "color6",
    color1: "#fa375c",
    color2: "#eb8498"
  },
  {
    name: "color7",
    color1: "#6f41ed",
    color2: "#8b70d5"
  },
  {
    name: "color8",
    color1: "#fd4138",
    color2: "#e3736e"
  }
];

const SkinChangeModal = props => {
  const { skinChangeModalVisible, handleCancel } = props;
  const [currentSkin, setCurrentSkin] = useState(
    localStorage.getItem("xly-skin") || "default"
  );
  const oldSkin = useRef(null);
  useEffect(() => {
    // getComputedStyle(oBody).getPropertyValue('--xly-login-header-logo')
    const oBody = document.querySelector("body");
    oldSkin.current = oBody.getAttribute("data-skin");
  }, []);

  const handleCancelSelf = () => {
    const oBody = document.querySelector("body");
    oBody.setAttribute("data-skin", oldSkin.current);
    handleCancel();
  };

  const handleOk = () => {
    localStorage.setItem("xly-skin", currentSkin);
    handleCancel();
  };

  const handleChooseSkin = ({ name }) => {
    setCurrentSkin(name);
    const oBody = document.querySelector("body");
    oBody.setAttribute("data-skin", name);
  };

  return skinChangeModalVisible ? (
    <AntdDraggableModal
      title={"主题肤色"}
      visible={skinChangeModalVisible}
      width={600}
      onOk={handleOk}
      onCancel={handleCancelSelf}
    >
      <div className={styles.skinChangeModal}>
        {skinList.map(item => {
          const { color1, color2, name } = item;
          return (
            <div
              className="skinChangeOption"
              onClick={() => {
                handleChooseSkin(item);
              }}
            >
              <div className="skinChangeOptionLeft">
                <div
                  className="skinChangeOptionColor2"
                  style={{ background: color2 }}
                />
              </div>
              <div className="skinChangeOptionRight">
                <div
                  className="skinChangeOptionColor1"
                  style={{ background: color1 }}
                />
                {currentSkin === name ? (
                  <div className="skinChangeChecked">✓</div>
                ) : (
                  ""
                )}
              </div>
            </div>
          );
        })}
      </div>
    </AntdDraggableModal>
  ) : (
    ""
  );
};

export default SkinChangeModal;