export interface ListItemValue {
  id: string;
  label: string;
  type: string;
  title: string;
  description: string;
  url: string;
}

import {Component, h, Prop, Watch} from '@stencil/core';

@Component({
  tag: 'hy-general-list',
  styleUrl: 'hy-general-list.scss',
  shadow: true,
})
export class HyGeneralList {
  @Prop() dataItems: ListItemValue[] | string;
  private _dataItems: ListItemValue[];

  //@State() listItems: Array<object> = [];

  @Watch('dataItems')
  arrayDataWatcher(newValue: ListItemValue[] | string) {
    if (typeof newValue === 'string') {
      this._dataItems = JSON.parse(newValue);
    } else {
      this._dataItems = newValue;
    }
  }

  componentWillLoad() {
    this.arrayDataWatcher(this.dataItems);
  }

  render() {
    const classAttributes = ['hy-general-list'].join(' ');

    return [
      <div class={classAttributes}>
        {this._dataItems.map((x) => {
          return (
            <div>
              {x.title}
              {x.description}
              {x.label}
              {x.id}
              {x.url}
              {x.type}
            </div>
          );
        })}
      </div>,
    ];
  }
}

/*

componentDidLoad() {
    this._dataItems = JSON.parse(this.dataItems);
    console.log(this._dataItems);

    let items = [];

    //this._dataItems.forEach((item) => {
    //}

    this.listItems = items;
  }


<hy-process-flow-box
                  class={classItem}
                  variant={processVariant}
                  box-number={index + 1}
                  box-title={x.heading}
                  box-description={x.description}
                  intermediate-step-title={x.step}
                  step-state={stepState}
                  number-term={this.numberTerm}
              />
* */