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

const style = {
  icon: {
    cursor: "pointer",
    color: "#666",
  },
};

class MobileToggle extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showRotate: false,
    };

    this.setMobileState = this.setMobileState.bind(this);
    this.rotate = this.rotate.bind(this);
    this.downloadJSON = this.downloadJSON.bind(this);
  }

  setMobileState(type, dimensions) {
    this.props.setMobileState(type, dimensions);
    this.setState({
      showRotate: type === "tablet" || type === "smartphone",
    });
  }

  downloadJSON() {
    console.log(JSON.stringify(this.props.pageContent).replace(/"/g, '\\"'));
    console.log(JSON.stringify(this.props.pageContent));
    console.log(this.props.pageContent);
  }

  rotate() {
    const mobileState = this.props.getMobileState();
    const dimensions = mobileState.dimensions;
    this.setMobileState(mobileState.type, {
      ...dimensions,
      paddingTop: dimensions.paddingLeft,
      paddingBottom: dimensions.paddingRight,
      paddingLeft: dimensions.paddingTop,
      paddingRight: dimensions.paddingBottom,
      width: dimensions.height,
      height: dimensions.width,
    });
  }

  render() {
    return (
      <div
        style={{
          position: "fixed",
          display: "inline-block",
          right: 20,
          bottom: 10,
          zIndex: 300,
          zoom: 0.8,
        }}
      >
        <div
          style={{
            border: "1px solid #DDD",
            background: "white",
            display: "inline-block",
            borderRadius: 6,
          }}
        >
          <Button
            icon
            style={style.icon}
            onClick={() =>
              this.setMobileState("fullscreen", {
                width: "100%",
                minHeight: "100vh",
                margin: 0,
                marginTop: 57,
              })
            }
          >
            zoom_out_map
          </Button>
          <Button
            icon
            style={style.icon}
            onClick={() =>
              this.setMobileState("desktop", {
                maxWidth: 1000,
                minHeight: "70vh",
                margin: "80px auto",
                overflow: "hidden",
              })
            }
          >
            tv
          </Button>
          <Button
            icon
            style={style.icon}
            onClick={() =>
              this.setMobileState("tablet", {
                width: 768,
                backgroundColor: theme.darkColor,
                paddingTop: 65,
                paddingBottom: 65,
                paddingLeft: 25,
                paddingRight: 25,
                borderRadius: 50,
                height: 1024,
              })
            }
          >
            tablet_android
          </Button>
          <Button
            icon
            style={style.icon}
            onClick={() =>
              this.setMobileState("smartphone", {
                width: 411,
                backgroundColor: theme.darkColor,
                paddingTop: 65,
                paddingBottom: 65,
                paddingLeft: 25,
                paddingRight: 25,
                borderRadius: 50,
                height: 731,
              })
            }
          >
            smartphone
          </Button>
        </div>
        <div style={{ display: "inline-block", width: 30 }}>
          {this.state.showRotate ? (
            <Button icon transparent style={style.icon} onClick={this.rotate}>
              screen_rotation
            </Button>
          ) : null}{" "}
        </div>
      </div>
    );
  }
}

export default MobileToggle;