import _ from "lodash";
import React, { Component } from "react";
import { Button, Slider } from "react-md";
import { Switch } from "@sc/components/ui/Inputs";
import style from "../style";

/**
 * A more/less button slider group (useful for increasing/decreasing a property like padding/margin, etc.)
 */
class ButtonSliderGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showValue: false,
      maxCheckValue: _.get(props, "maxCheckValue", false),
      autoCheckValue: _.get(props, "autoCheckValue", false)
    };
    this.doChange = this.doChange.bind(this);
  }

  doChange(changeValue, dbUpdate = true, wait = 500) {
    this.props.onChange(changeValue, dbUpdate, wait);
    this.setState({ showValue: true });
  }

  render() {
    const {
      text,
      showSlider,
      button1,
      button2,
      value,
      minValue,
      maxValue,
      toolTip,
      showMaxCheck,
      showAutoCheck,
      originalValue
    } = this.props;

    const { autoCheckValue, maxCheckValue } = this.state;

    return (
      <fieldset style={style.fieldset} title={toolTip}>
        <legend>{text}</legend>
        {showSlider ? (
          <div>
            <Button
              onClick={() => this.doChange(button1.value, true, false)}
              icon
              style={{ ...button1.style }}
              {...button1.events}
              primary
            >
              {button1.icon}
            </Button>
            <Slider
              onChange={e => this.doChange(e)}
              style={style.slider}
              value={parseInt(value, 10) || 0}
              defaultValue={parseInt(value, 10) || 0}
              min={parseInt(minValue, 10)}
              max={parseInt(maxValue, 10)}
            />
            <Button
              onClick={() => this.doChange(button2.value, true, false)}
              icon
              style={{ ...button2.style }}
              {...button2.events}
              primary
            >
              {button2.icon}
            </Button>
          </div>
        ) : (
          <div>
            <Button
              onClick={() => this.doChange(button1.value)}
              style={{ ...style.btn, ...button1.style }}
              flat
              swapTheming
              label={button1.label || button1.value}
              primary
              {...button1.events}
            >
              {button1.icon}
            </Button>
            <Button
              onClick={() => this.doChange(button2.value)}
              style={{ ...style.btn, ...button2.style }}
              flat
              swapTheming
              label={button2.label || button2.value}
              primary
              {...button2.events}
            >
              {button2.icon}
            </Button>
          </div>
        )}
        {showMaxCheck ? (
          <div style={{ textAlign: "left", padding: 0 }}>
            {/* <Switch
              id="switch"
              name="switch"
              aria-label="switch"
              type="switch"
              inline
              checked={maxCheckValue}
              onChange={() => null}
              onClick={() => {
                if (value === "100%") this.doChange(false);
                else this.doChange("100%");
              }}
            /> */}
            <Switch
              checked={maxCheckValue}
              onClick={() => {
                this.setState(
                  prevState => ({
                    maxCheckValue: !prevState.maxCheckValue
                  }),
                  () => {
                    if (value === "100%") this.doChange(false);
                    else this.doChange("100%");
                  }
                );
              }}
            />
            <span style={{ position: "relative", padding: 0, top: 0 }}>
              Max
            </span>
          </div>
        ) : null}
        {showAutoCheck ? (
          <div style={{ textAlign: "left", padding: 0 }}>
            {/* <Switch
              id="switch"
              name="switch"
              aria-label="switch"
              type="switch"
              inline
              checked={autoCheckValue}
              onChange={() => null}
              onClick={() => {
                if (!autoCheckValue) this.doChange(false);
                else this.doChange(originalValue);
              }}
              // defaultChecked
            /> */}
            <Switch
              checked={autoCheckValue}
              onClick={() => {
                this.setState(
                  prevState => ({
                    autoCheckValue: !prevState.autoCheckValue
                  }),
                  () => {
                    if (value === "100%") this.doChange(false);
                    else this.doChange("100%");
                  }
                );
              }}
            />
            <span style={{ position: "relative", padding: 0, top: 0 }}>
              Auto Size
            </span>
          </div>
        ) : null}
      </fieldset>
    );
  }
}

ButtonSliderGroup.defaultProps = {
  showSlider: true,
  showMaxCheck: false,
  maxCheckValue: true,
  showAutoCheck: false,
  autoCheckValue: true
};

export default ButtonSliderGroup;