import _ from "lodash";
import React, { Component } from "react";
import Countdown from "react-countdown-now";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import {
  PropertiesWindow,
  Section,
  Alignment,
  Margin,
  Typography,
  Background,
  Padding,
  Spacing,
  BordersShadow,
} from "@sc/modules/page/Builder/Properties";
import { TimeDateOptions } from "./TimeDateOptions";
import { MoreTimeOptions } from "./MoreTimeOptions";
import { getRenderer } from "./renderer";

class BasicPropertiesTab extends Component {
  render() {
    return (
      <div style={{ width: "100%" }}>
        <TimeDateOptions {...this.props} isExpanded />
        <MoreTimeOptions {...this.props} />
        <Section label="Position" icon="import_export">
          <Margin {...this.props} />
        </Section>
        <Alignment {...this.props} marginAlign verticalAlign={false} />
      </div>
    );
  }
}

const AdvancedPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Typography {...props} isExpanded />
    <Background {...props} />
    <Section label="Padding & Spacing" icon="border_clear">
      <Padding {...props} />
      <Spacing {...props} />
    </Section>
    <BordersShadow {...props} />
  </div>
);

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

export default class CountdownObject extends Component {
  // constructor(props) {
  //   super(props);
  // }

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

    const marginTop = _.get(settings, "properties.marginTop");
    const justifyContent = _.get(
      settings,
      "properties.justifyContent",
      "normal"
    );

    return (
      <div
        style={{
          display: "flex",
          justifyContent,
          marginTop,
        }}
      >
        <EditorObject
          {...this.props}
          style={{ height: "100%", display: "block" }}
          PropertiesView={Properties}
          // debug
        >
          <Countdown
            date={_.get(settings, "eventDate")}
            renderer={getRenderer(settings)}
          />
        </EditorObject>
      </div>
    );
  }
}