import React, { useState } from "react";
import PropTypes from "prop-types";
import Pct from "../PatternOptionPercentage";
import Deg from "../PatternOptionDegree";
import Mm from "../PatternOptionMillimeter";
import Bool from "../PatternOptionBool";
import List from "../PatternOptionList";
import Count from "../PatternOptionCount";
import { optionType, optionDefault } from "@freesewing/utils";
import { FormattedMessage } from "react-intl";
import { injectIntl } from "react-intl";

const OptionGroup = props => {
  const renderOption = (name, sub = false) => {
    let option = props.config.options[name];
    let type = optionType(option);
    let stringKey = `options.${props.config.name}.${name}.`;
    let extraProps = {
      name,
      dflt: optionDefault(props.config.options[name]),
      units: props.units,
      updateValue: props.updateValue,
      raiseEvent: props.raiseEvent,
      title: <FormattedMessage id={stringKey + "title"} />,
      desc: <FormattedMessage id={stringKey + "description"} />,
      intl: props.intl,
      pattern: props.config.name,
      key: name
    };
    let noyes = [
      <FormattedMessage id="app.no" />,
      <FormattedMessage id="app.yes" />
    ];
    switch (type) {
      case "pct":
        return <Pct {...option} {...extraProps} />;
        break;
      case "deg":
        return <Deg {...option} {...extraProps} />;
        break;
      case "mm":
        return <Mm {...option} {...extraProps} units={props.units} />;
        break;
      case "bool":
        return <Bool {...option} {...extraProps} labels={noyes} />;
        break;
      case "list":
        return <List {...option} {...extraProps} />;
        break;
      case "count":
        return <Count {...option} {...extraProps} />;
        break;
      default:
        throw new Error("Unsupported option type: " + type);
    }
  };

  return (
    <React.Fragment>
      {props.options.map(name => {
        let key = name;
        let output = [];
        if (typeof name === "object") {
          key = Object.keys(name).pop();
          // Subgroup
          for (let subGroup of Object.keys(name)) {
            output.push(
              <h5 key={subGroup + "-title"} className="subheading">
                <FormattedMessage id={"optiongroups." + subGroup} />
              </h5>
            );
            let children = [];
            for (let option of name[subGroup])
              children.push(renderOption(option, true));
            output.push(<ul className="nav l4">{children}</ul>);
          }
        } else output.push(renderOption(name));

        return output;
      })}
    </React.Fragment>
  );
};

OptionGroup.propTypes = {
  config: PropTypes.object.isRequired,
  options: PropTypes.array.isRequired,
  units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};

OptionGroup.defaultProps = {};

export default injectIntl(OptionGroup);