import * as React from "react";
import { keys, get } from "lodash";
import { Grid } from "@material-ui/core";
import Select from "react-select";
import { CSSProperties } from "./types";

interface StyleBuilderProps {
  /**
   * The incoming style object
   */
  style: React.CSSProperties;

  /**
   * Triggered when the setting changes.
   *
   * Returns the incoming style object with modifications
   */
  onChange: (style: React.CSSProperties) => void;
}

const localStyle = {
  container: {
    border: "1px solid #CCC",
    marginTop: 2,
  },
  cell: {
    fontFamily: "Roboto",
    fontSize: "10pt",
    margin: "5px 0",
  },
  input: {
    width: "100%",
    boxSizing: "border-box",
    border: "none",
    outline: "none",
    fontSize: "10pt",
  },
};

export const StyleBuilder: React.FC<StyleBuilderProps> = ({
  style,
  onChange,
}) => {
  const styleKeys = keys(style);

  const handleChange = (property, value) => {
    console.log({ property, value });
    onChange({ ...style, [property]: value });
  };

  const convertCamelCaseToSentenceCase = (text) => {
    const result = text.replace(/([A-Z])/g, " $1");
    return result.charAt(0).toUpperCase() + result.slice(1);
  };

  const options = Object.keys(CSSProperties).map((itm) => ({
    value: itm,
    label: convertCamelCaseToSentenceCase(itm),
  }));
  console.log(options);

  return (
    <Grid container style={localStyle.container}>
      {styleKeys.map((property) => (
        <>
          <Grid xs={6} style={localStyle.cell}>
            <Select
              // theme={(theme) => ({
              //   ...theme,
              //   // border: "none",
              //   // borderColor: "transparent",
              //   borderRadius: 0,
              //   padding: "none",
              // })}
              styles={{
                container: (provided) => ({
                  ...provided,
                  padding: 0,
                  // border: "3px solid green",
                }),
                control: (provided) => ({
                  ...provided,
                  border: "none",
                  // border: "3px solid red",
                }),
                indicatorsContainer: (provided) => ({
                  ...provided,
                  // border: "3px solid pink",
                  padding: 0,
                  display: "none",
                }),
                indicatorSeparator: (provided) => ({
                  ...provided,
                  // border: "3px solid purple",
                  display: "none",
                }),
                input: (provided) => ({
                  ...provided,
                  // border: "3px solid purple",
                  padding: 0,
                  margin: 0,
                  ...localStyle.input,
                }),
                menu: (provided) => ({
                  ...provided,
                  // border: "3px solid black",
                }),
                placeholder: (provided) => ({
                  ...provided,
                  // border: "3px solid black",
                }),
                singleValue: (provided) => ({
                  ...provided,
                  // border: "3px solid blue",
                }),
                valueContainer: (provided) => ({
                  ...provided,
                  // border: "3px solid yellow",
                  padding: 0,
                }),
              }}
              options={options}
              defaultValue={{
                value: property,
                label: convertCamelCaseToSentenceCase(property),
              }}
              onChange={(e) =>
                handleChange(e.value, get(style, e.value, "initial"))
              }
            />
          </Grid>
          <Grid xs={6} style={localStyle.cell}>
            <input
              type="text"
              style={{ ...localStyle.input, padding: 10 }}
              value={style[property]}
              onChange={(e) => handleChange(property, e.target.value)}
            />
          </Grid>
        </>
      ))}
    </Grid>
  );
};

export default StyleBuilder;