import React, { Component } from "react";
import style from "../style";
import { Button, Slider, Switch } from "@sc/components/ui";
import theme from "@sc/components/ui/theme";

class ButtonSliderGroup extends Component {
  constructor(props) {
    super(props);
    const { value, maxCheckValue, autoCheckValue } = props;

    this.state = {
      sliderValue: parseInt(value, 10),
      maxCheckValue: maxCheckValue || false,
      autoCheckValue: autoCheckValue || false,
    };

    this.doChange = this.doChange.bind(this);
    this.doFinalChange = this.doFinalChange.bind(this);
    this.doManualUpdate = this.doManualUpdate.bind(this);
  }

  doChange(e, value) {
    this.setState({ sliderValue: value }, () => {
      this.props.onChange(value, false);
    });
  }

  doFinalChange(e, value) {
    this.props.onChange(value);
  }

  doManualUpdate() {
    const { minValue, maxValue, onChange } = this.props;
    const { sliderValue } = this.state;

    const newValue = prompt(
      `Enter a number (${minValue} - ${maxValue})`,
      parseInt(sliderValue, 10)
    );

    this.setState({ sliderValue: newValue }, () => {
      onChange(parseInt(newValue, 10));
    });
  }

  render() {
    const {
      toolTip,
      button1,
      onChange,
      showSlider,
      button2 = { style: {} },
      text,
      minValue,
      maxValue,
      showMaxCheck,
      showAutoCheck,
      originalValue,
    } = this.props;
    const { autoCheckValue, maxCheckValue, sliderValue } = this.state;

    return (
      <fieldset style={style.fieldset} title={toolTip}>
        <legend>{text}</legend>

        {showSlider && !maxCheckValue && !autoCheckValue && (
          <div style={{ display: "flex" }}>
            <div style={{ width: 30 }}>
              <Button
                onClick={() => {
                  onChange(button1.value);
                }}
                icon
                style={{ color: theme.primaryColor, ...button2.style }}
                {...button1.events}
                transparent
              >
                {button1.icon}
              </Button>
            </div>
            <div
              // style={style.slider}
              style={{ width: 190, margin: 10, marginLeft: 15 }}
              onDoubleClick={this.doManualUpdate}
            >
              <Slider
                onChange={this.doChange}
                onChangeCommitted={this.doFinalChange}
                style={{ width: "100%" }}
                value={parseInt(sliderValue, 10)}
                valueLabelDisplay={
                  Number.isInteger(sliderValue) ? "auto" : "off"
                }
                min={parseInt(minValue, 10)}
                max={parseInt(maxValue, 10)}
              />
            </div>
            <div style={{ width: 30 }}>
              <Button
                onClick={() => {
                  onChange(button2.value);
                }}
                icon
                style={{ color: theme.primaryColor, ...button2.style }}
                {...button2.events}
                transparent
              >
                {button2.icon}
              </Button>
            </div>
          </div>
        )}

        {showMaxCheck && (
          <>
            <Switch
              checked={maxCheckValue}
              onClick={() => {
                this.setState(
                  (prevState) => ({
                    maxCheckValue: !prevState.maxCheckValue,
                    sliderValue: prevState.maxCheckValue
                      ? maxValue
                      : prevState.sliderValue,
                  }),
                  () => {
                    if (sliderValue === "100%")
                      this.doFinalChange(false, "auto");
                    else this.doFinalChange(false, "100%");
                  }
                );
              }}
            />
            <span style={{ position: "relative", padding: 0, top: 0 }}>
              Maximum Amount
            </span>
          </>
        )}

        {showAutoCheck && (
          <>
            <Switch
              checked={autoCheckValue}
              onClick={() => {
                this.setState(
                  (prevState) => ({
                    autoCheckValue: !prevState.autoCheckValue,
                  }),
                  () => {
                    if (!autoCheckValue) this.doFinalChange(false);
                    else this.doFinalChange(originalValue);
                  }
                );
              }}
            />
            <span style={{ position: "relative", padding: 0, top: 0 }}>
              Determine Automaticallly
            </span>
          </>
        )}
      </fieldset>
    );
  }
}

ButtonSliderGroup.defaultProps = {
  showSlider: true,
};

export default ButtonSliderGroup;