import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import _ from "lodash";
import React from "react";
import { Switch } from "react-md";
import { PopupInner, PopupOuter } from "./component";
import settings from "./settings";
import style from "./style";

class PopupBackground extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPopupBackgroundShowing: _.get(
        props.settings,
        "isPopupBackgroundShowing",
        true
      )
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    const { settings, updateComponentSettings } = this.props;

    updateComponentSettings(
      settings.id,
      {
        ...settings,
        isPopupBackgroundShowing: !_.get(
          settings,
          "isPopupBackgroundShowing",
          true
        )
      },
      true
    );
  }

  render() {
    const { settings } = this.props;
    return (
      <Tools.Section label="Basic Settings" icon="settings" expanded>
        <div style={{ textAlign: "left", padding: 0 }}>
          <Switch
            type="switch"
            inline
            checked={_.get(settings, "isPopupBackgroundShowing", true)}
            onClick={() => {
              this.onChange();
            }}
          />
          <span style={{ position: "relative", padding: 0, top: -4 }}>
            Show Background
          </span>
        </div>
      </Tools.Section>
    );
  }
}

const BasicPropertiesTab = props => {
  return (
    <div style={{ width: "100%" }}>
      <PopupBackground {...props} />
      <Tools.PositionPadding {...props} minValue={0} maxValue={500} expanded />
      <Tools.WidthHeight label="Popup Size" {...props} />
      <Tools.BordersShadow {...props} />
    </div>
  );
};

const Properties = props => (
  <Tools.PropertiesWindow
    {...props}
    defaultTab="basic"
    tabs={[{ id: "basic", title: "Popup", component: BasicPropertiesTab }]}
  />
);

const PopupComponent = props => {
  const { settings } = props;
  return (
    <PopupOuter {...props}>
      <EditorObject {...props} PropertiesView={Properties}>
        <div
          style={style.popupClose}
          onClick={() =>
            props.updateComponentSettings(
              settings.id,
              {
                ...settings,
                properties: {
                  ...settings.properties,
                  display: "none"
                }
              },
              true,
              false
            )
          }
        />
        <PopupInner {...props} />
      </EditorObject>
    </PopupOuter>
  );
};

export const Popup = {
  settings,
  component: PopupComponent
};