import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import { Resizable, ResizableBox } from "react-resizable";

import _ from "lodash";
import React from "react";
import { PictureContent } from "./content";

const showImage = (files, props) => {
  if (files.length) {
    const file = _.head(files);

    if (!_.has(file, "preview")) {
      Object.assign(file, { preview: URL.createObjectURL(file) });
    }

    props.updateComponentSettings(
      props.settings.id,
      {
        ...props.settings,
        src: file.preview,
      },
      true,
      0
    );
  }

  console.log("Detected Upload", files);
};

const PictureContentEdit = (props) => {
  return (
    <EditorObject {...props} PropertiesView={Properties}>
      <div
        style={{
          padding: props.padding,
          cursor: props.match.path.indexOf("preview") > -1 ? "inherit" : "grab",
        }}
      >
        <PictureContent {...props} />
      </div>
    </EditorObject>
  );
};

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.UploadGroup
      createMediaItem={props.createMediaItem}
      uploadURLToS3={props.uploadURLToS3}
      settings={props.settings}
      url={props.settings.src}
      accept="image/jpeg, image/png"
      highlighted
      onChange={(files) => {
        showImage(files, props);
      }}
      isExpanded
      label="Upload New Picture"
    />
    <Tools.Interactions
      label="Picture Actions"
      {...props}
      onUpdate={(action) => console.log(action)}
    >
      <div />
    </Tools.Interactions>
    <Tools.WidthHeight label="Picture Size" {...props} />
    <Tools.PositionPadding {...props} />
    <Tools.Alignment {...props} verticalAlign={false} textAlign />
  </div>
);

const AdvancedPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.BordersShadow {...props} isExpanded />
  </div>
);

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

export default (props) => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const padding = settings.properties ? settings.properties.padding : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";
  return (
    <div style={{ marginTop, textAlign }}>
      <PictureContentEdit {...props} padding={padding} ignoreHref />
    </div>
  );
};