import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread";

/**
 * Web DescriptionList Component
 *
 */
import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { registerElement, validateDOMAttributes, processChildren } from '../../shared/component-helper'; // import './style/dnb-description-list.css' // no good solution to import the style here

const renderProps = {};
export const propTypes = {
  data: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.exact({
    title: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
  }))]).isRequired,
  info: PropTypes.string,
  class: PropTypes.string,

  /** React props */
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]) // Web Component props

};
export const defaultProps = _objectSpread({
  data: [],
  info: null,
  class: null,

  /** React props */
  className: null,
  children: null
}, renderProps);
export default class DescriptionList extends PureComponent {
  static enableWebComponent() {
    registerElement(DescriptionList.tagName, DescriptionList, defaultProps);
  }

  static getData(props) {
    let res = [];
    if (props.data) res = props.data;else res = processChildren(props);
    if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
    return res || [];
  }

  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      if (props.data) {
        if (state._data !== props.data) {
          state._data = props.data;
          state.data = DescriptionList.getData(props);
        }
      }
    }

    state._listenForPropChanges = true;
    return state;
  }

  constructor(props) {
    super(props);
    this.state = {
      _listenForPropChanges: true,
      // active_item: props.active_item,
      _data: props.data || props.children,
      data: DescriptionList.getData(props)
    };
  }

  render() {
    const {
      info,
      className,
      class: _className
    } = this.props;
    const data = DescriptionList.getData(this.props);
    const params = {
      className: classnames('dnb-description-list', className, _className) // also used for code markup simulation

    };
    validateDOMAttributes(this.props, params);
    return React.createElement("div", params, data.length > 0 && React.createElement("dl", {
      className: "dnb-description-list__dl typo-light"
    }, data.map((_ref, i) => {
      let {
        title,
        value
      } = _ref;
      return React.createElement(Fragment, {
        key: "dl".concat(i)
      }, React.createElement("dt", {
        className: "dnb-description-list__dt"
      }, title), React.createElement("dd", {
        className: "dnb-description-list__dd"
      }, value));
    })), info && React.createElement("p", {
      className: "dnb-description-list__info dnb-typo-book"
    }, info));
  }

}

_defineProperty(DescriptionList, "tagName", 'dnb-description-list');

_defineProperty(DescriptionList, "defaultProps", defaultProps);

DescriptionList.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};