import _ from "lodash";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import React from "react";
import { Progress } from "semantic-ui-react";

import ButtonSliderGroup from "@sc/modules/page/Builder/Properties/BuildingBlocks/ButtonSliderGroup";
import { ColorPicker } from "@sc/modules/page/Builder/Properties";

const defaultAmount = 23;
const defaultColor = "blue";

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

const BasicPropertiesTab = (props) => {
  const { settings, updateComponentSettings, updateComponentStyle } = props;

  const colorConversion = {
    "#ff0000": "red",
    "#ffa500": "orange",
    "#ffff00": "yellow",
    "#808000": "olive",
    "#008000": "green",
    "#008080": "teal",
    "#0000ff": "blue",
    "#ee82ee": "violet",
    "#800080": "purple",
    "#ffc0cb": "pink",
    "#a52a2a": "brown",
    "#808080": "grey",
    "#000000": "black",
  };

  return (
    <div style={{ width: "100%" }}>
      <Tools.Section label="Progress Settings" icon="settings" isExpanded>
        <ButtonSliderGroup
          {...props}
          onChange={(value) =>
            updateComponentSettings(settings.id, { ...settings, amount: value })
          }
          text="Amount"
          button1={{ icon: "remove", value: "SHRINK" }}
          button2={{ icon: "add", value: "GROW" }}
          minValue={0}
          maxValue={100}
          value={_.get(settings, "amount", defaultAmount)}
        />
        <ColorPicker
          {...props}
          color={settings.properties.backgroundColor}
          colorArray={[
            "red",
            "orange",
            "yellow",
            "olive",
            "green",
            "teal",
            "blue",
            "violet",
            "purple",
            "pink",
            "brown",
            "grey",
            "black",
          ]}
          showHex={false}
          onChange={(color, dbUpdate = true, scheduleUpdate = false) => {
            updateComponentSettings(settings.id, {
              ...settings,
              color: _.get(
                colorConversion,
                color.hex.toLowerCase(),
                defaultColor
              ),
            });
          }}
        />
      </Tools.Section>
      <Tools.WidthHeight showHeight={false} {...props} />
      <Tools.PositionPadding {...props} />
      <Tools.Alignment {...props} verticalAlign={false} marginAlign />
    </div>
  );
};

export default (props) => {
  const { settings } = props;
  const { properties } = settings;

  const marginTop = _.get(properties, "marginTop", 0);

  return (
    <div style={{ marginTop }}>
      <EditorObject {...props} PropertiesView={Properties}>
        <div style={{ ...properties, marginTop: 0 }}>
          <Progress
            percent={_.get(settings, "amount", defaultAmount)}
            color={_.get(settings, "color", defaultColor)}
          />
        </div>
      </EditorObject>
    </div>
  );
};