import React, { Component } from "react";

import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { updateSection } from "@sc/modules/v2/Properties/components/generator";

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";

import { EditorMode } from "@sc/modules/v2/Editor/types";
import countdownSettings from "../settings";

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 const Properties: React.FC = (props) => {
//   const { updateComponentStyle, updateComponentSettings, settings } = props;
//   const { properties } = countdownSettings;
//   const { sections } = properties.main;

//   // return <div />;
//   return (
//     <PropertiesBuilder
//       {...props}
//       data={{
//         ...properties,
//         main: { ...properties.main, sections },
//       }}
//       // title="Countdown Settings"
//     />
//   );
// };

export default Properties;