import _Button from "antd/es/button";
import _Switch from "antd/es/switch";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "style", "checked", "defaultChecked", "disabled", "size", "type", "loading", "checkedChildren", "unCheckedChildren", "buttonname", "disableType", "checolors", "conentColor", "fontsizes"];
/* eslint-disable @typescript-eslint/no-shadow */
import * as React from 'react';
import { useState, useEffect } from 'react';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons/es/index';
import "./index.less";
var antSwitch = function antSwitch(_ref) {
  var className = _ref.className,
    style = _ref.style,
    checked = _ref.checked,
    defaultChecked = _ref.defaultChecked,
    disabled = _ref.disabled,
    size = _ref.size,
    type = _ref.type,
    loading = _ref.loading,
    checkedChildren = _ref.checkedChildren,
    unCheckedChildren = _ref.unCheckedChildren,
    buttonname = _ref.buttonname,
    disableType = _ref.disableType,
    checolors = _ref.checolors,
    conentColor = _ref.conentColor,
    fontsizes = _ref.fontsizes,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(''),
    ID = _useState[0],
    setID = _useState[1];
  var _useState2 = useState(),
    colorOpen = _useState2[0],
    setColorOpen = _useState2[1];
  var _useState3 = useState(),
    handles = _useState3[0],
    sethandles = _useState3[1];
  var _useState4 = useState(),
    leftstyles = _useState4[0],
    setleftstyle = _useState4[1];
  var doc = document.getElementById(ID) || document;
  // const [_style,setStyles] =useState({width:"44px"})
  var _style = _extends({}, style) || {};
  var _styles = _extends({}, style) || {};
  var _otherProps = _extends({}, otherProps) || {};
  _style['marginLeft'] = 'none';
  _style['marginRight'] = 'none';
  _style['marginTop'] = 'none';
  _style['marginBottom'] = 'none';
  _otherProps.style = _style;
  _styles['width'] = "none";
  // _styles['paddingLeft'] = _styles['paddingLeft'] ? _styles?.['paddingLeft'] : "44px"
  useEffect(function () {
    setID("switch_" + uuid());
  }, []);
  useEffect(function () {
    checolor();
    switchhandle();
    content();
  });
  function uuid() {
    return (Math.random() * 1e6 >> 0).toString(36);
  }
  var onChange = function onChange(checked) {
    console.log("switch to " + checked);
    if (checked) {
      checolor();
    } else {}
  };
  var defaultProps = _extends({
    size: size,
    style: style,
    disabled: disabled,
    loading: loading,
    defaultChecked: defaultChecked,
    buttonname: buttonname,
    onChange: onChange,
    checolors: checolors,
    conentColor: conentColor,
    fontsizes: fontsizes
  }, otherProps);
  if (type == "文本") {
    defaultProps.checkedChildren = checkedChildren;
    defaultProps.unCheckedChildren = unCheckedChildren;
  } else if (type == "icon") {
    defaultProps.checkedChildren = /*#__PURE__*/React.createElement(CheckOutlined, null);
    defaultProps.unCheckedChildren = /*#__PURE__*/React.createElement(CloseOutlined, null);
  }
  if (checked) {
    defaultProps.checked = checked;
  }

  //修改div
  var divstyle = function divstyle() {
    setTimeout(function () {
      var res = document.getElementById(ID);
      console.log(res);
    }, 0);
  };
  // 修改选中颜色
  var checolor = function checolor() {
    setColorOpen(checolors);
    var elem = doc.querySelector('.ant-switch-checked');
    var style = document.createElement("style"); //创建一个<style>标签
    var openStyle = document.createTextNode('#' + ID + ' ' + '.ant-switch-checked{background-color:' + colorOpen + '!important' + ";}"); //更改后的样式
    style.appendChild(openStyle); //把样式添加到style标签里
    document.body.appendChild(style); //把内联样式表添加到html中
    if (elem) {
      elem.classList.add("openStyle");
      // if(checolors){
      //   elem.classList.add("openStyle");
      // }else{
      //   elem.classList.remove("openStyle");
      // }
    }
  };

  // 开关等比例缩放
  var switchhandle = function switchhandle() {
    sethandles(Math.round(parseInt(style === null || style === void 0 ? void 0 : style.height) / 2));
    setleftstyle(parseInt(style === null || style === void 0 ? void 0 : style.height) - 2);
    // if(style){
    //   setStyles(style)
    // }
    var elem = doc.querySelector('.ant-switch-handle');
    var elems = doc.querySelector('.ant-switch-checked .ant-switch-handle');
    elem.style.width = parseInt(style === null || style === void 0 ? void 0 : style.height) - 4 + 'px';
    elem.style.height = parseInt(style === null || style === void 0 ? void 0 : style.height) - 4 + 'px';
    //    if(elems){
    //   elems.style.left = `calc(100% - ${parseInt(style?.height) - 2}px)`
    // }

    var styles = document.createElement("style"); //创建一个<style>标签
    var openhandles = document.createTextNode('#' + ID + ' ' + '.ant-switch-handle:before{border-radius:' + handles + 'px' + ";}"); //更改后before的样式
    var leftstyle = document.createTextNode('#' + ID + ' ' + '.ant-switch-checked .ant-switch-handle{left : calc(100% - ' + leftstyles + 'px)' + ";}"); //更改后leftstyle的样式
    styles.appendChild(openhandles); //把样式添加到style标签里
    styles.appendChild(leftstyle);
    document.body.appendChild(styles); //把内联样式表添加到html中
    if (elem) {
      elem.classList.add("openhandles");
      elem.classList.add("leftstyle");
    }
    // if(elems){
    //   elem.classList.add("leftstyle");
    // }
  };

  // 改变内容的颜色
  var content = function content() {
    var ele = doc.querySelector('.ant-switch-inner');
    ele.style.fontSize = fontsizes + "px";
    ele.style.color = conentColor;
  };
  var Primaryswitch = function Primaryswitch() {
    return defaultChecked ? /*#__PURE__*/React.createElement(_Switch, _extends({
      defaultChecked: true
    }, defaultProps, {
      style: _otherProps.style
    })) : /*#__PURE__*/React.createElement(_Switch, _extends({}, defaultProps, {
      style: _otherProps.style
    }));
  };
  var Buttonswitch = function Buttonswitch() {
    var _useState5 = useState(true),
      disableds = _useState5[0],
      setDisableds = _useState5[1];
    var toggle = function toggle() {
      setDisableds(!disableds);
    };
    return /*#__PURE__*/React.createElement("div", {
      style: _otherProps.style
    }, /*#__PURE__*/React.createElement(_Switch, _extends({}, defaultProps, {
      disabled: disableds,
      defaultChecked: true,
      style: _otherProps.style
    })), /*#__PURE__*/React.createElement("br", null), "    ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      onClick: toggle
    }, buttonname));
  };
  return /*#__PURE__*/React.createElement("div", {
    id: ID,
    style: _styles,
    className: "switchstyle"
  }, /*#__PURE__*/React.createElement(Primaryswitch, null));
};
antSwitch.displayName = 'antSwitch';
export default antSwitch;