import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import theme from "@sc/components/ui/theme";
import _ from "lodash";
import React from "react";
import Loader from "react-loader-spinner";

import { VideoContent } from "./component";
import settings from "./settings";
import style from "./style";

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

const VideoContentEdit = (props) => {
  const isUploading = _.get(props, "settings.isLoading", false);

  return (
    <EditorObject {...props} fitContent={false} PropertiesView={Properties}>
      <div
        style={{
          ...style.coverObject,
          background: isUploading ? "black" : "transparent",
          opacity: 0.4,
        }}
      ></div>
      {isUploading && (
        <div style={style.coverObject}>
          <Loader
            type="MutatingDots"
            color={theme.secondaryColor}
            height="100"
            width="100"
          />
          <h3
            style={{ background: "white", padding: 5, display: "inline-block" }}
          >
            Your Video is Uploading...
          </h3>
        </div>
      )}

      <VideoContent {...props} muted />
    </EditorObject>
  );
};

const Component = (props) => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";
  const height = "100%";

  return (
    <div style={{ marginTop, textAlign, height }}>
      <VideoContentEdit {...props} />
    </div>
  );
};

class BasicPropertiesTab extends React.Component {
  constructor(props) {
    super(props);

    this.showVideo = this.showVideo.bind(this);
  }

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

    if (files.length) {
      const file = _.head(files);

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

      console.log("prv", file.preview);

      updateComponentSettings(
        settings.id,
        {
          ...this.props.settings,
          isLoading: file.preview.indexOf("blob:") > -1,
          src: {
            mp4: file.preview,
          },
        },
        true,
        false
      );
    }
  }

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

    return (
      <div style={{ width: "100%" }}>
        <Tools.UploadGroup
          text="Video"
          settings={settings}
          url={settings.src.mp4}
          accept="video/mp4"
          highlighted
          onChange={this.showVideo}
          isExpanded
          label="Upload A Different Video"
          pageContent={pageContent}
          updateComponentSettings={updateComponentSettings}
        />
        <Tools.WidthHeight label="Video Size" {...this.props} />
        <Tools.PositionPadding {...this.props} />
        <Tools.Alignment {...this.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: "Video", component: BasicPropertiesTab },
      { id: "advanced", title: "Advanced", component: AdvancedPropertiesTab },
    ]}
  />
);

export const Video = {
  settings,
  component: Component,
};