import React, { useState, useEffect, useMemo, useRef } from "react";
import { connect } from "dva";
import { withRouter, matchPath } from "dva/router";
import { Scrollbars } from "react-custom-scrollbars";
import { Button, Icon } from "antd";
import EnergyIcon from "../utils/energyIcon";
import { $consts } from "../plugins";
import styles from "./toggle.less";

const Toggle = (props) => {
  const [num, setNum] = useState(1);
  const [leftDis, setleftDis] = useState(false);
  const [rightDis, setrightDis] = useState(false);
  const {getNum} =props;

  const leftClick = () => {
    if (num > 1) {
      setNum(num - 1);
     
    }
  };
  const rightClick = () => {
    if (num < 2) {
      setNum(num + 1);
    }
  };
  useEffect(() => {
    if (num === 1) {
      setleftDis(true);
      setrightDis(false);
    }
    if (num === 2) {
      setrightDis(true);
      setleftDis(false);
    }
    getNum(num)
  },[num]);
//   useEffect(() => {
//     return()=>{
//        getNum(num) 
//     }
    
    
//   },[num]);
 

  return (
    <div className={styles.toggle}>
      <div className={styles.toggleLeft} onClick={leftClick}>
        {/* <Icon type="left-circle"></Icon> */}
        <Button
          type="primary"
          shape="circle"
          icon="left"
          size="small"
          disabled={leftDis}
        />
      </div>
      <div className={styles.toggleRight} onClick={rightClick}>
        <Button
          type="primary"
          shape="circle"
          icon="right"
          size="small"
          disabled={rightDis}
        />
      </div>
    </div>
  );
};
export default withRouter(connect(({ login }) => ({ login }))(Toggle));