import { SectionTypes } from "@sc/modules/v2/Properties/types";
// import theme from "@sc/components/ui/theme";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";
import { IComponentSettings, ComponentTypes } from "../types";
import { CountDownTypes } from "./types";

export const style = {
  COUNTDOWN: {
    style: {
      margin: "0 auto",
      display: "inline-block",
    },
    dimensionStyle: {
      minWidth: 80,
    },
    numberStyle: {
      textAlign: "center",
      fontSize: "26pt",
      fontFamily: theme.fontFamily,
      fontWeight: "bold",
      padding: 10,
      backgroundColor: theme.backgroundColor,
      color: theme.foregroundColor,
      margin: 5,
    },
    labelStyle: {
      fontWeight: "bold",
      fontFamily: theme.fontFamily,
    },
    dividerStyle: {
      padding: 10,
      fontWeight: "bold",
      fontFamily: theme.fontFamily,
    },
  },
};

const settings: IComponentSettings = {
  id: ComponentTypes.COUNTDOWN,
  name: "Countdown",
  description: "",
  thumbnail: "comp_countdowns.png",
  default: {
    type: ComponentTypes.COUNTDOWN,
    countType: CountDownTypes.EVENT,
    eventDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
    // properties: style.COUNTDOWN.style,
    properties: {},
    dimensionStyle: style.COUNTDOWN.dimensionStyle,
    labelStyle: style.COUNTDOWN.labelStyle,
    numberStyle: style.COUNTDOWN.numberStyle,
    dividerStyle: style.COUNTDOWN.dividerStyle,
    showDivider: false,
    actions: [],
  },
  properties: {
    main: {
      tabs: ["Basic"],
      sections: [
        {
          type: SectionTypes.WIDTH,
          sectionWrap: true,
          settings: {
            label: "Countdown Width",
            text: "Width",
            icon: "swap_horiz",
            showAutoCheck: false,
            isExpanded: true,
          },
        },
        {
          type: SectionTypes.POSITION,
          sectionWrap: true,
          settings: {
            label: "Countdown Position",
            icon: "swap_vert",
          },
        },
        {
          type: SectionTypes.ALIGNMENT,
          settings: {
            verticalAlign: false,
            marginAlign: false,
            textAlign: true,
          },
        },
      ],
    },
  },
};

export default settings;