import React, { Component } from 'react';
import classNames from 'classnames/bind';
import GenericValue from 'components/items/GenericValue';

import { get } from 'lodash';
import { viewConfig } from 'config/general';
import styleIdentifiers from './moduleDisplayFields.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ModuleDisplayFieldsProps = StateProps & DispatchProps & OwnProps;

interface ModuleDisplayFieldsState {}

export default class ModuleDisplayFields extends Component<
  ModuleDisplayFieldsProps,
  ModuleDisplayFieldsState
> {
  renderItem = (genericItem: any, key: string) => {
    const { fields, item, ...rest } = this.props;

    if (!genericItem) return false;

    if (genericItem.hideDetail || genericItem.noDetail) return false;

    if (genericItem.type === 'col' || genericItem.type === 'column') {
      return (
        <div key={key} className={styles('column')}>
          <ModuleDisplayFields {...rest} fields={genericItem.fields} />
        </div>
      );
    }
    if (genericItem.type === 'section') {
      return (
        <div key={key} className={styles('section-wrapper')}>
          <div className={styles('section', genericItem.class)}>
            {genericItem.label && <h3 className={styles('section-title')}>{genericItem.label}</h3>}
            <ModuleDisplayFields {...rest} fields={genericItem.fields} />
          </div>
        </div>
      );
    }
    return (
      <div key={key} className={styles('field')}>
        {this.renderField(genericItem, key)}
      </div>
    );
  };

  renderField = (genericItem: any, key: string) => {
    const { data, loadOne, fields, item, noUpdate, transformedData, ...rest } = this.props;

    const name =
      genericItem.name || genericItem.displayDetailValue || genericItem.displayValue || key;
    let value = get(data, name);

    const type = genericItem.type;

    const displayIf = genericItem.displayIf;
    const hideIf = genericItem.hideIf;

    if (displayIf && !value) {
      return false;
    }

    if (hideIf && !value) {
      return false;
    }

    if (type === 'separator') {
      return (
        <div className={styles('separator', genericItem.small && 'intermediary')}>
          <h3>{genericItem.label}</h3>
        </div>
      );
    }
    if (type === 'list') {
      const listValues = Array.isArray(value) && value;

      return (
        <div>
          {!genericItem.noLabel && (
            <div
              className={styles(
                'separator',
                (genericItem.first || genericItem.noMargin) && 'no-margin',
              )}
            >
              <h3>{genericItem.label || key}</h3>
            </div>
          )}
          {listValues &&
            listValues.length > 0 &&
            value.map((it, index) => (
              <div className={styles('list-value')} key={index}>
                <ModuleDisplayFields
                  {...rest}
                  noUpdate
                  transformedData={transformedData}
                  data={it}
                  fields={genericItem.fields}
                />
              </div>
            ))}
          {(!listValues || (listValues && listValues.length === 0)) && <span>-</span>}
        </div>
      );
    }

    if (type === 'price') {
      value = data.price.toLocaleString(navigator.language, {
        style: 'currency',
        currency: data.currency || 'EUR',
      });
    }

    return (
      <GenericValue
        {...viewConfig.inputProps}
        apiPayload={genericItem.api}
        transformedData={transformedData}
        loadApi={loadOne}
        apiDataKey={genericItem.dataKey}
        item={genericItem}
        value={value}
        dataKey={key}
        data={data}
        noUpdate={noUpdate}
      />
    );
  };

  render() {
    const { item, fields } = this.props;

    const data = fields || item;
    const keys = data && Object.keys(data);

    if (!keys) return false;

    return (
      <div className={styles('ModuleDisplayFields')}>
        {keys.map(key => this.renderItem(data[key], key))}
      </div>
    );
  }
}
