import _ from "lodash";
import React from "react";

import { ListItem, Menu } from "@sc/components/ui";
import theme from "@sc/components/ui/theme";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";

import style from "./style";

const ColumnsEdit = (props) => (
  <div
    style={{
      ...props.settings.properties,
      justifyContent: "normal",
      display: "block",
      padding: 0,
      height: props.settings.properties.height || "unset",
      width: props.settings.properties.width || "100%",
      marginTop: props.settings.properties.marginTop || 0,
    }}
  >
    <EditorObject
      {...props}
      style={{ height: "100%", display: "block" }}
      PropertiesView={Properties}
      color={theme.altColor[1]}
    >
      <div
        style={{
          display: "flex",
          padding: _.get(props, "settings.properties.padding", 0),
          flexWrap: "wrap",
          height: "100%",
        }}
      >
        {props.children}
      </div>
    </EditorObject>
    <div style={{ clear: "both" }} />
  </div>
);

const NiceMenu = (props) => (
  <div style={{ ...style.selectField, cursor: "pointer", ...props.style }}>
    <Menu {...props} style={{ width: "100%", textAlign: "left" }}>
      <div style={{ maxHeight: 200, overflowY: "scroll" }}>
        {props.children}
      </div>
    </Menu>
  </div>
);

const setItemsPerRow = (props, num) => {
  console.log({ num });
  props.updateComponentStyle(props.settings.id, {
    maxColumnsPerRow: num,
  });
};

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Background {...props} isExpanded />
    <Tools.WidthHeight {...props} />
    <Tools.Section label="Position" icon="import_export">
      <Tools.Margin {...props} />
    </Tools.Section>
    <Tools.Alignment {...props} verticalAlign={false} marginAlign />
  </div>
);

const AdvancedPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Section label="Columns Per Row" icon="view_column">
      <div style={{ padding: 10 }}>
        <NiceMenu
          label={`Max items per row: ${_.get(
            props.settings.properties,
            `mobile[${props.getMobileState().type}].maxColumnsPerRow`,
            ""
          )}`}
        >
          <ListItem onClick={() => setItemsPerRow(props, 1)}>1</ListItem>
          <ListItem onClick={() => setItemsPerRow(props, 2)}>2</ListItem>
          <ListItem onClick={() => setItemsPerRow(props, 3)}>3</ListItem>
          <ListItem onClick={() => setItemsPerRow(props, 4)}>4</ListItem>
          <ListItem onClick={() => setItemsPerRow(props, 5)}>5</ListItem>
        </NiceMenu>
      </div>
    </Tools.Section>
    <Tools.BordersShadow {...props} isExpanded />
  </div>
);

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

export default (props) => <ColumnsEdit {...props} />;